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数 子 版 权 声 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 痛 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 
但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 ,未 经 授权 ， 不 得 进行 传播 。 
我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产 
权 。 
如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实 施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
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曾 探 


2007 年 毕业 于 吉林 大 学 软 
件 学 院 ， 目 前 就 职 于 腾讯 
AlloyTeam 前 端 团队 ， 高 
级 工程 师 。 

曾 参 与 Web QQ、QQ 群 、 
Q+ 开 发 者 网 站 、 微 云 、 
QQ 兴趣 部 落 等 大 型 前 端 项 
目的 开发 。 有 Java、Python 
和 JavaScript 的 开发 经 验 ， 
业余 作品 有 HTML5 版 街头 
霸王 等 。 

平时 喜欢 电影 和 音乐 ， 业 
余 时 间 是 一 名 健身 教练 。 
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本 和 


一 部 分 讲解 了 JavaScript 语言 面向 对 象 和 


模式 中 的 体现 ， 以 及 一 些 常见 的 面向 对 象 编程 技巧 和 日 常 开发 中 的 代码 重 构 。 
书 中 所 有 示例 均 来 自作 者 长 期 的 开发 实践 ， 与 实际 开发 密切 相关 ， 适 用 于 初 、 中 、 高 级 Web 前 端 开 


发 人 员 ， 


习 版 本 图 书馆 CIP 数 据 核 字 (2015) 第 072098 号 


内 容 提 要 


区 根据 JavaScript 语言 的 特性 ， 全 画 


[发 实践 / 曾 探 著 . 一 北京 : 


总 结 了 实际 工作 中 常用 的 设计 模式 。 全 书 共 分 为 三 个 部 分 ， 第 


国 数 式 编程 的 知识 及 其 在 设计 模式 方面 的 作用 ; 第 二 部 分 通过 
步 步 完 善 示例 代码 ， 由 浅 入 深 地 讲解 了 16 个 设计 模式 ; 第 三 部 分 讲述 了 面向 对 象 的 设计 原则 及 其 在 设计 


尤其 适合 想 往 架构 师 晋 级 的 中 高 级 程序 员 阅 读 。 
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如 果 时 间 倒 退 一 点 ， 很 难 想象 我 这 样 的 “ 懒 人 ”会 花 上 近 一 年 的 业余 时 间 来 完成 这 本 书 。 

这 本 书 的 原型 是 我 发 表 在 腾讯 内 部 KM 论坛 的 一 篇 文章 《JavaScript 常 用 设计 模式 》。 这 篇 文 
章 反响 不 错 ， 还 位 列 2012 年 KM 十 大 热门 文章 第 一 名 。 不 过 说 老实 话 ， 当 时 自己 也 是 模式 的 初学 
者 ， 和 网 上 大 部 分 讨论 设计 模式 的 文章 一 样 , 这 篇 文章 里 其 实 存在 一 些 错误 ， 这 里 要 诚 县 地 说 声 
抱歉 。 也 正 是 由 于 这 个 原因 ,， 近 两 年 我 重新 投身 于 对 设计 模式 的 研究 之 中 。 尽 管 如 此 ， 当 在 电脑 
上 敲 下 本 书 第 一 行 字 的 时 候 , 我 心中 还 是 非常 志 起 。 一 是 我 自己 本 身 并 非 理 论 派 ， 大 部 分 工作 时 
间 都 在 做 上 层 应 用 开发 ,很 多 偏 理 论 的 知识 对 于 我 来 说 , 也 是 一 个 学 习 加 总 结 的 过 程 ， 二 是 不 确 
保 自己 能 否 牺牲 如 此 多 的 业余 时 间 ， 毕 竞 很 难 前 减 玩 LOL 的 时 间 。 

无 论 如 何 ， 它 终于 和 大 家 见面 了 。 


本 书 结构 


本 书 共 分 为 三 大 部 分 。 

第 一 部 分 讲解 了 JavaScript 面 向 对 象 和 函数 式 编程 方面 的 知识 ， 主 要 包括 静态 类 型 语言 和 动 
态 类 型 语言 的 区 别 及 其 在 实现 设计 模式 时 的 异同 ， 以 及 封装 、 继 承 、 多 态 在 动态 类 型 语言 中 的 
体现 ， 此 外 还 介绍 了 JavaScript 基 于 原型 继承 的 面向 对 象 系统 的 来 龙 去 脉 ， 给 学 习 设 计 模式 做 好 
铺垫 。 

第 二 部 分 是 核心 部 分 ， 通 过 从 普通 到 更 好 的 代码 示例 ， 由 浅 到 深 地 讲解 了 16 个 设计 模式 。 
第 三 部 分 主要 讲解 面向 对 象 的 设计 原则 及 其 在 设计 模式 中 的 体现 , 还 介绍 了 一 些 常见 的 面向 
对 象 编程 技巧 和 日 常 开 发 中 的 代码 重 构 。 


目标 读者 


本 书 主要 面向 初中 级 JavaScript 开 发 人 员 。 本 书 虽 然 以 设计 模式 为 主题 ， 但 也 讲述 了 一 些 
JavaScript 开 发 中 需要 的 基础 知识 , 初级 程序 员 也 能 从 这 里 找到 自己 需要 的 东西 。 而 对 于 中 级 程序 
员 而 言 ， 学 习 设计 模式 的 过 程 ， 可 能 正 是 往 高 级 进 阶 的 过 程 。 
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示例 代码 与 勘误 


本 书 提 供 了 丰富 的 示例 ， 示 例 代码 可 以 在 图 灵 社 区 本 书 主页 ( http:/www.ituring.com.cn/ 
book/1632 ) 的 “ 随 书 下 载 ” 中 下 载 使 用 。 


另外 ， 由 于 作者 的 水 平和 时 间 所 限 ， 本 书 中 难免 存在 一 些 遗 憾 。 如 果 大 家 发 现 有 什么 问题 , 或 
者 对 本 书 有 任何 建议 , 欢迎 到 图 灵 社 区 本 书 主 页 提交 勘误 ,也 可 以 发 送 邮 件 到 svenzeng@tencent.com 
来 讨论 ， 先 谢谢 ! @ 


致谢 


虽然 在 写作 过 程 中 经 历 了 不 少 曲折 , 但 最 终 顺 利 完成 。 在 这 里 , 我 想 感谢 为 我 提供 帮助 的 所 
有 人 。 


训 


澳 图 灵 的 美女 编辑 Alice， 没 有 她 的 帮助 ， 这 本 书 不 可 能 完成 。 


谢 AlloyTeam 团 队 中 每 一 个 成 员 对 我 的 指导 和 帮助 ， 在 这 里 工作 不 仅 是 工作 ， 也 是 生活 很 
重要 的 一 部 分 。 


区 


谢 贺 师 俊 、 王 集 铝 、 易 郑 超 、 程 巧 非 几 位 老师 提供 的 技术 指导 和 宝贵 建议 。 
感谢 设计 师 “ 出 过 设计 ”设计 的 搬 画 和 封面 ， 它 们 让 内 容 更 加 生动 有 趣 。 
最 后 ， 感 谢 我 的 妻子 Annie， 遇 见 你 ， 是 最 美丽 的 意外 。 
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《设计 模式 》 一 书 自 1995 年 成 书 一 来 ,一 直 是 程序 员 谈 论 的 “高 端 ” 话 题 之 一 。 许 多 程序 员 
从 设计 模式 中 学 到 了 设计 软件 的 灵感 , 或 者 找到 了 问题 的 解决 方案 。 在 社区 中 , 既 有 人 对 模式 无 
比 尝 拜 ， 也 有 人 对 模式 充满 误解 。 有 些 程序 员 把 设计 模式 视 为 圣经 ， 唯 模式 至 上 ; 有 些 人 却 认为 
设计 模式 只 在 C++ 或 者 Java 中 有 用 武之 地 ，jJavaScript 这 种 动态 语言 根本 就 没有 设计 模式 一 说 。 

那么 , 在 进入 设计 模式 的 学 习 之 前 , 我 们 最 好 还 是 从 模式 的 起 源 说 起 ， 分 别 听 上 听 这 些 不 同 的 
声音 。 

设计 模式 并 非 是 软件 开发 的 专业 术语 。 实 际 上 ,“ 模 式 ” 最 早 诞生 于 建筑 学 。20 世 纪 70 年 代 ， 
哈佛 大 学 建筑 学 博士 Christopher Alexander 和 他 的 研究 团队 花 了 约 20 年 的 时 间 , 研究 了 为 解决 同一 
个 问题 而 设计 出 的 不 同 建筑 结构 ， 从 中 发 现 了 那些 高 质量 设计 中 的 相似 性 ， 并 且 用 “模式 ”来 指 
代 这 种 相似 性 。 

受 Christopher Alexander 工 作 的 启发 ，Erich Gamma 、Richard Helm 、Ralph Johnson 、John 
Vlissides 四 人 (人称 Gang Of Four ，GoF ) 把 这 种 “模式 ”观点 应 用 于 面向 对 象 的 软件 设计 中 ， 
并 且 总 结 了 23 种 常见 的 软件 开发 设计 模式 , 录入 《设计 模式 : 可 复 用 面向 对 象 软件 的 基础 》 一 书 。 

设计 模式 的 定义 是 : 在 面向 对 象 软 件 设 计 过 程 中 针对 特定 问题 的 简洁 而 优雅 的 解决 


方案 。 


通俗 一 点 说 , 设计 模式 是 在 某 种 场合 下 对 某 个 问题 的 一 种 解决 方案 。 如 果 再 通俗 一 点 说 , 设 
计 模 式 就 是 给 面向 对 象 软件 开发 中 的 一 些 好 的 设计 取 个 名 字 。 

GoF 成 员 之 一 John Vlissides 在 他 的 另 一 本 关于 设计 模式 的 著作 《设计 模式 沉思 录 》 中 写 过 这 
样 一 段 话 : 

设想 有 一 个 电子 爱好 者 , 虽然 他 没有 经 过 正规 的 培训 , 但 是 却 日 积 月 累 地 设计 并 制 

造 出 许多 有 用 的 电子 设备 : 业余 无 线 电 、 盖 革 计 数 器 、 报 警 器 等 。 有 一 天 这 个 爱好 者 决 

定 重新 回 到 学 校 去 攻读 电子 学 学 位 ,来 让 自己 的 才能 得 到 真实 的 认可 。 随 着 课程 的 展开 ， 

这 个 爱好 者 突然 发 现 课程 内 容 都 似曾相识 。 似 曾 相 识 的 并 不 是 术语 或 者 表述 的 方式 ， 而 
背后 的 概念 。 这 个 爱好 者 不 断 学 到 一 些 名 称 和 原理 , 虽然 这 些 名 称 和 原理 原来 他 不 知 
， 但 事实 上 他 多 年 来 一 直 都 在 使 用 。 整 个 过 程 只 不 过 是 一 个 接 一 个 的 顿悟 。 


A 


2 


向 
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软件 开发 中 的 设计 也 是 如 此 。 这 些 “ 好 的 设计 ”并 不 是 GoF 发 明 的 ， 而 是 早已 存在 于 软件 开 
发 中 。 一 个 稍 有 经 验 的 程序 员 也 许 在 不 知 不 觉 中 数 次 使 用 过 这 些 设计 模式 。GoF 最 大 的 功绩 是 把 
这 些 “ 好 的 设计 ”从 浩瀚 的 面向 对 象 世界 中 挑选 出 来 ， 并 且 给 予 它们 一 个 好 听 又 好 记 的 名 字 。 

那么 ,给 模式 一 个 名 字 有 什么 意义 呢 ? 上 述 故事 中 的 电子 爱好 者 在 未 进入 学 校 之 前 , 一 点 都 
不 知道 这 些 关 于 电器 的 概念 有 一 些 特定 的 名 称 ， 但 这 不 妨碍 他 制造 出 一 些 电子 设备 。 


实际 上 给 “模式 ” 取 名 的 意义 非常 重要 。 人 类 可 以 走 到 生物 链 顶 端的 前 两 个 原因 分 别 是 会 “使 
用 名 字 ” 和 “使 用 工具 ”。 在 软件 设计 中 ， 一 个 好 的 设计 方案 有 了 名 字 之 后 ,才能 被 更 好 地 传播 ， 
人 们 才 有 更 多 的 机 会 去 分 享 和 学 习 它 们 。 

也 许 这 个 小 故事 可 以 说 明 名 字 对 于 模式 的 重要 性 : 假设 你 是 一 名 足球 教练 , 正在 球场 边 指挥 
一 场 足球 赛 。 通过 一 段 时 间 的 观察 后 , 发 现 对 方 的 后 卫 技术 精 淇 , 身体 强壮 , 但 边 后 卫 速 度 较 慢 ， 
中 后 卫 身 高 和 头 球 都 非常 一 般 。 于 是 你 在 场 边 大声 指 挥 队员 :“ 用 速度 突破 对 方 边 后卫 之 后 ， 往 
球门 方向 中 出 高 球 ， 中 路 接应 队员 抢 点 头 球 攻 门 。 

在 机 会 稍 纵 即 逝 的 足球 场 上 , 教练 这 样 费 尽 口舌 地 指挥 队员 比赛 无 疑 是 荒 恋 的 。 实 际 上 这 种 
战术 有 一 个 名 字 叫 作 “ 下 底 传 中 ”。 正 因为 战术 有 了 对 应 的 名 字 ， 在 球场 上 教练 可 以 很 方便 地 和 
球员 交流 。“ 下 底 传 中 ”这 种 战术 即 是 足球 场 上 的 一 种 “模式 ”。 

在 软件 设计 中 亦 是 如 此 。 我 们 都 知道 设计 经 验 非常 重要 。 也 许 我 们 都 有 过 这 种 感觉 : 这 个 问 
题 发 生 的 场景 似曾相识 ， 以 前 我 遇 到 并 解决 过 这 个 问题 ,但 是 我 不 知道 怎么 跟 别人 去 描述 它 。 我 
们 非常 希望 给 这 个 问题 出 现 的 场景 和 解决 方案 取 一 个 统一 的 名 字 ， 当 别人 听 到 这 个 名 字 的 时 候 ， 
便 知道 我 想 表 达 什 么 。 比 如 一 个 JavaScript 新 手 今天 学 会 了 编写 each 函 数 ，each 了 水 数 用 来 迭代 一 个 
数组 。 他 很 难 想到 这 个 each 孙 数 其 实 就 是 迭代 器 模式 。 于 是 他 向 别人 描述 这 个 函数 结构 和 意图 的 
时 候 会 遇 到 困难 , 而 一 旦 大 家 对 迭代 器 模式 这 个 名 字 达 成 了 共识 , 剩 下 的 交流 便 是 自然 而 然 的 事情 。 


学 习 模 式 的 作用 


小 说 家 很 少 从 头 开始 设计 剧情 , 足球 教练 也 很 少 从 头 开始 发 明 战术 , 他 们 总 是 沿 秦 一 些 已 经 
存在 的 模式 。 当 足球 教练 看 到 对 方 边 后 卫 速 度 慢 ， 中 后 卫 身 高 矮 时 ， 自 然 会 想到 “下 底 传 中 ”这 
种 模式 。 

同样 , 在 软件 设计 中 , 模式 是 一 些 经 过 了 大 量 实际 项 目 验 证 的 优秀 解决 方案 。 熟悉 这 些 模式 
的 程序 员 ， 对 菜 些 模式 的 理解 也 许 形成 了 条 件 反射 。 当 合适 的 场景 出 现时 ,他 们 可 以 很 快 地 找到 
某 种 模式 作为 解决 方案 。 

比如 ， 当 他 们 看 到 系统 中 存在 一 些 大量 的 相似 对 象 , 这 些 对 象 给 系统 的 内 存 带 来 了 较 大 的 负 
担 。 如 果 他 们 熟悉 享 元 模式 ， 那 么 第 一 时 间 就 可 以 想到 用 享 元 模式 来 优化 这 个 系统 。 再 比如 ， 系 
统 中 某 个 接口 的 结构 已 经 不 能 符合 目前 的 需求 ， 但 他 们 又 不 想 去 改动 这 个 被 灰尘 遮 住 的 老 接 口 ， 
一 个 熟悉 模式 的 程序 员 将 很 快 地 找到 适配器 模式 来 解决 这 个 问题 。 
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如 果 我 们 还 没有 学 习 全 部 的 模式 ， 当 遇 到 一 个 问题 时 , 我 们 页 茧 之 中 觉得 这 个 问题 出 现 的 几 
率 很 高 , 说 不 定 别人 也 遇 到 过 同样 的 问题 , 并且 已 经 把 它 整 理 成 了 模式 , 提供 了 一 种 通用 的 解决 
方案 。 这 时 候 去 翻 翻 《设计 模式 》 这 本 书 也 许 就 会 有 意外 的 收获 。 


模式 在 不 同 语言 之 间 的 区 别 


《设计 模式 》 一 书 的 副标题 是 “可 复 用 面向 对 象 软件 的 基础 "。《 设 计 模 式 》 这 本 书 完全 是 从 
面向 对 象 设计 的 角度 出 发 的 ， 通过 对 封装 、 继 承 、 多 态 、 组 合 等 技术 的 反复 使 用 ,提炼 出 一 些 可 
重复 使 用 的 面向 对 象 设计 技巧 。 所 以 有 一 种 说 法 是 设计 模式 仅仅 是 就 面向 对 象 的 语言 而 言 的 。 

《设计 模式 》 最 初 讲 的 确实 是 静态 类 型 语言 中 的 设计 模式 ， 原 书 大 部 分 代码 由 C++ 写成 ， 但 
设计 模式 实际 上 是 解决 某 些 问 题 的 一 种 思想 , 与 具体 使 用 的 语言 无 关 。 模式 社区 和 语言 一 直 都 在 
发 展 ， 如 今 , 除了 主流 的 面向 对 象 语言 ， 困 数 式 语 言 的 发 展 也 非常 迅猛 。 在 函数 式 或 者 其 他 编程 
范 型 的 语言 中 ， 设 计 模 式 依 然 存 在 。 

人 类 飞 上 天 空 需 要 借助 飞机 等 工具 ,而 鸟 儿 天 生 就 有 翅膀 。 在 Dota 游 戏 里 , 牛头 人 的 人 生 目 
标 是 买 一 把 跳 刀 ( 跳 刀 可 以 使 用 跳跃 技能 )， 而 敌 法 师 天 生 就 有 跳跃 技能 。 因 为 语言 的 不 同 ， 一 
些 设计 模式 在 另外 一 些 语言 中 的 实现 也 许 跟 我 们 在 《设计 模式 》 一 书 中 看 到 的 大 相 径 庭 ， 这 一 点 
也 不 令 人 意外 。 

Google 的 研究 总 监 Peter Norvig 早 在 1996 年 一 篇 名 为 “动态 语言 设计 模式 ”的 演讲 中 ,就 指出 
了 GoF 所 提出 的 23 种 设计 模式 ， 其 中 有 16 种 在 Lisp 语 言 中 已 经 是 天 然 的 实现 。 比 如 ，Command 模 
式 在 Java 中 需要 一 个 命令 类 ,一 个 接收 者 类 , 一 个 调用 者 类 。Command 模 式 把 运算 块 封装 在 命令 
对 象 的 方法 内 ,成 为 该 对 象 的 行为 ， 并 把 命令 对 象 四 处 传递 。 但 在 Lisp 或 者 JavaScript 这 些 把 函数 
当 作 一 等 对 象 的 语言 中 ， 函 数 便 能 封装 运算 块 ,并 且 函 数 可 以 被 当成 对 象 一 样 四 处 传递 ,这样 一 
来 ， 命 令 模式 在 Lisp 或 者 JavaScript 中 就 成 为 了 一 种 隐形 的 模式 。 

在 Java 这 种 静态 编译 型 语言 中 ， 无 法 动态 地 给 已 存在 的 对 象 添 加 职责 ， 所 以 一 般 通 过 包装 类 
的 方式 来 实现 装饰 者 模式 。 但 在 JavaScript 这 种 动态 解释 型 语言 中 , 给 对 象 动态 添加 职责 是 再 简单 
不 过 的 事情 。 这 就 造成 了 JavaScript 语 言 的 装饰 者 模式 不 再 关注 于 给 对 和 象 动态 添加 职责 , 而 是 关注 
于 给 函数 动态 添加 职责 。 


设计 模式 的 适用 性 

设计 模式 被 一 些 人 认为 只 是 奇伟 其 谈 的 东西 , 这 些 人 认为 设计 模式 并 没有 多 大 用 途 。 毕 苋 我 
们 用 普通 的 方法 就 能 解决 的 问题 , 使 用 设计 模式 可 能 会 增加 复杂 度 , 或 带 来 一 些 额外 的 代码 。 如 
果 对 一 些 设计 模式 使 用 不 当 ， 事 情 还 可 能 变 得 更 糟 。 

从 某 些 角度 来 看 , 设计 模式 确实 有 可 能 带 来 代码 量 的 增加 , 或 许 也 会 把 系统 的 逻辑 搞 得 更 复 
杂 。 但 软件 开发 的 成 本 并 非 全 部 在 开发 阶段 , 设计 模式 的 作用 是 让 人 们 写 出 可 复 用 和 可 维护 性 高 
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的 程序 。 假设 有 一 个 空房 间 , 我 们 要 日 复 一 日 地 往 里面 放 一 些 东西 。 最 简单 的 办 法 当然 是 把 这 些 
东西 直接 扔 进去 ,但 是 时 间 久 了 ， 就 会 发 现 很 难 从 这 个 房子 里 找到 自己 想 要 的 东西 ， 要 调整 某 几 
样 东 西 的 位 置 也 不 容易 。 所 以 在 房间 里 做 一 些 柜 子 也 许 是 个 更 好 的 选择 , 虽然 柜子 会 增加 我 们 的 
成 本 , 但 它 可 以 在 维护 阶段 为 我 们 带 来 好 处 。 使 用 这 些 柜 子 存放 东西 的 规则 , 或 许 就 是 一 种 模式 。 

所 有 设计 模式 的 实现 都 遵循 一 条 原则 ， 即 “ 找 出 程序 中 变化 的 地 方 ， 并 将 变化 封装 起 来 ”。 
一 个 程序 的 设计 总 是 可 以 分 为 可 变 的 部 分 和 不 变 的 部 分 。 当 我 们 找 出 可 变 的 部 分 , 并 且 把 这 些 部 
分 封装 起 来 ,那么 剩 下 的 就 是 不 变 和 稳定 的 部 分 。 这 些 不 变 和 稳定 的 部 分 是 非常 容易 复 用 的 。 这 
也 是 设计 模式 为 什么 描写 的 是 可 复 用 面向 对 象 软件 基础 的 原因 。 

设计 模式 被 人 误解 的 一 个 重要 原因 是 人 们 对 它 的 误 用 和 滥用 , 比如 将 一 些 模 式 用 在 了 错误 的 
场景 中 ， 或 者 说 在 不 该 使 用 模式 的 地 方 刻意 使 用 模式 。 特 别 是 初学 者 在 刚 学 会 使 用 一 个 模式 时 ， 
恨不得 把 所 有 的 代码 都 用 这 个 模式 来 实现 。 锤 子 理论 在 这 里 体现 得 很 明显 : 当 我 们 有 了 一 把 锤子 ， 
看 什么 都 是 钉子 。 拿 足球 比赛 的 例子 来 说 ， 我 们 的 目标 只 是 进 球 ,“ 下 底 传 中 ”这 种 “模式 ” 仅 
仅 是 达到 进 球 目 标的 一 种 手段 。 当 我 们 面临 密集 防守 时 ， 下 底 传 中 或 许 是 一 种 好 的 选择 ; 但 如 果 
我 们 的 球员 获得 了 一 个 直接 面 对 对 方 守门 员 的 单刀 机 会 , 那么 是 否 还 要 把 球 先 传 向 边 路 队友 , 再 
由 边 路 队友 来 一 个 边 路 传 中 呢 ? 答案 是 显而易见 的 , 模式 应 该 用 在 正确 的 地 方 。 而 哪些 才 算 正确 
的 地 方 ， 只 有 在 我 们 深刻 理解 了 模式 的 意图 之 后 ， 再 结合 项 目的 实际 场景 才 会 知道 。 


分 辨 模式 的 关键 是 意图 而 不 是 结构 


在 设计 模式 的 学 习 中 ,有 人 经 常 发 出 这 样 的 疑问 : 代理 模式 和 装饰 者 模式 , 策略 模式 和 状态 
模式 ， 策 略 模式 和 智能 命令 模式 ， 这 些 模 式 的 类 图 看 起 来 儿 乎 一 模 一 样 ， 它 们 到 底 有 什么 区 别 ? 

实际 上 这 种 情况 是 普遍 存在 的 , 许多 模式 的 类 图 看 起 来 都 差不多 , 模式 只 有 放 在 具体 的 环境 
下 才 有 意义 。 比 如 我 们 的 手机 ， 把 它 当 电话 的 时 候 , 它 就 是 电话 ; 把 它 当 曾 钟 的 时 候 , 它 就 是 闹 
钟 ; 用 它 玩 游戏 的 时 候 ， 它 就 是 游戏 机 。 我 看 到 有 人 手中 拿 着 iPhone18， 但 那 实际 上 可 能 只 是 一 
个 吹风 机 。 有 很 多 模式 的 类 图 和 结构 确实 很 相似 , 但 这 不 太 重 要 ， 辨 别 模式 的 关键 是 这 个 模式 出 
现 的 场景 ， 以 及 为 我 们 解决 了 什么 问题 。 


对 JavaScript 设 计 模 式 的 误解 


虽然 JavaScript 是 一 门 完全 面向 对 象 的 语言 ， 但 在 很 长 一 段 时 间 内 ，JavaScript 在 人 们 的 印象 
中 只 是 用 来 验证 表单 , 或 者 完成 一 些 简单 动画 特效 的 脚本 语言 。 在 JavaScript 语 言 上 运用 设计 模式 
难免 显得 小 题 大 做 。 但 目前 JavaScript 已 成 为 最 流行 的 语言 之 一 ,在 许多 大 型 Web 项 目 中 ,JavaScript 
代码 的 数量 已 经 非常 多 了 。 我 们 绝对 有 必要 把 一 些 优秀 的 设计 模式 借鉴 到 JavaScript 这 门 语言 中 。 
许多 优秀 的 JavaScript 开 源 框架 也 运用 了 不 少 设计 模式 。 

JavaScript 设 计 模 式 的 社区 目前 还 几乎 是 一 片 范 漠 。 网 络 上 有 一 些 讨论 JavaScript 设 计 模 式 的 
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资料 和 文章 ， 但 这 些 资料 和 文章 大 多 都 存在 两 个 问题 。 

第 一 个 问题 是 习惯 把 静态 类 型 语言 的 设计 模式 照搬 到 JavaScript 中 ， 比 如 有 人 为 了 模拟 
JavaScript 版 本 的 工厂 方法 ( Factory Method ) 模式 ， 而 生硬 地 把 创建 对 象 的 步骤 延迟 到 子 类 中 。 
实际 上 ， 在 Java 等 静态 类 型 语言 中 ， 让 子 类 来 “决定 ”创建 何 种 对 象 的 原因 是 为 了 让 程序 迎合 
赖 倒置 原则 ( DIP )。 在 这 些 语言 中 创建 对 象 时 ， 先 解 开 对 象 类 型 之 间 的 耦合 关系 非常 重要 ,这样 
才 有 机 会 在 将 来 让 对 象 表现 出 多 态 性 。 

而 在 JavaScript 这 种 类 型 模糊 的 语言 中 ， 对 象 多 态 性 是 天 生 的 ， 一 个 变量 既 可 以 指向 一 个 类 ， 
又 可 以 随时 指向 男 外 一 个 类 ,JavaScript 不 存在 类 型 看 合 的 问题 ,自然 也 没有 必要 刻意 去 把 对 象 “ 延 
述 ” 到 子 类 创建 ,也 就 是 说 ，JavaScript 实 际 上 是 不 需要 工厂 方法 模式 的 。 模 式 的 存在 首先 是 能 》 
我 们 解决 什么 问题 ， 这 种 牵强 的 模拟 只 会 让 人 觉得 设计 模式 既 难 懂 又 没什么 用 处 。 

男 一 个 问题 是 习惯 根据 模式 的 名 字 去 腾 测 该 模式 的 一 切 。 比如 命令 模式 本 意 是 把 请 求 封装 到 
对 象 中 , 利用 命令 模式 可 以 解 开 请 求 发 送 者 和 请 求 接受 者 之 间 的 耦合 关系 。 但 命令 模式 经 常 被 人 
误解 为 只 是 一 个 名 为 execute 的 普通 方法 调用 。 这 个 方法 除了 叫 作 execute 之 外 , 其实 并 没有 看 出 其 
他 用 处 。 所 以 许多 人 会 误会 命令 模式 的 意图 ， 以 为 它 其 实 没什么 用 处 ， 从 而 联想 到 其 他 设计 模式 
也 没有 用 处 。 

这 些 误解 都 影响 了 设计 模式 在 JavaScript 语 言 中 的 发 展 。 


模式 的 发 展 

前 面 说 过 ,模式 的 社区 一 直 在 发 展 。GoF 在 1995 年 提出 了 23 种 设计 模式 。 但 模式 不 仅仅 局 限 
于 这 23 种 ,在 近 20 年 的 时 间 里 ,也 许 有 更 多 的 模式 已 经 被 人 发 现 并 总 结 了 出 来 ,比如 一 些 JavaScript 
图 书 中 会 提 到 模块 模式 、 沙 箱 模 式 等 。 这 些 “ 模 式 ” 能 否 被 世人 公认 并 流传 下 来 ， 还 有 待 时 间 验 
证 。 不 过 某 种 解决 方案 要 成 为 一 种 模式 , 还 是 有 几 个 原则 要 遵守 的 。 这 几 个 原则 即 是 “再 现 ”“ 教 
学 ”和 “能 够 以 一 个 名 字 来 描述 这 种 模式 ”。 

不 管 怎样 ,在 一 些 模式 被 公认 并 流行 起 来 之 前 , 需要 慎重 地 冠 之 以 某 种 模式 的 名 称 。 否 则 模 
式 也 许 很 容易 泛滥 ， 导致 人 人 都 在 发 明 模 式 , 这 反而 增加 了 交流 的 难度 。 说 不 准 哪 天 我 们 就 能 听 
到 有 人 说 全 局 变量 模式 、 加 模式 、 减 模式 等 。 

在 《设计 模式 》 出 版 后 的 近 20 年 里 ,也 出 现 了 另外 一 批 讲述 设计 模式 的 优秀 读物 。 其 中 许多 
都 获得 过 Jolt 大 奖 。 数 不 清 的 程序 员 从 设计 模式 中 获 益 ， 也 许 是 改善 了 自己 编写 的 某 个 软件 ， 也 
许 是 从 设计 模式 的 学 习 中 更 好 地 理解 了 面向 对 象 编程 思想 。 无论 如 何 , 相信 对 我 们 这 些 大 多 数 的 
普通 程序 员 来 说 ， 系 统 地 学 习 设 计 模 式 并 没有 坏处 ， 相 反 ， 你 会 在 模式 的 学 习 过 程 中 受益 菲 浅 。 
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第 一 部 分 


基础 知识 


作为 本 书 的 第 一 部 分 ， 我 们 在 进入 设计 模式 的 学 习 之 前 ， 需 要 先 了 解 一 些 相关 的 周边 知识 ， 
例如 一 些 面向 对 象 的 基础 知识 、this 等 重要 概念 , 还 要 掌握 一 些 函 数 式 编程 的 技巧 。 这 些 都 是 学 
习 设 计 模式 的 必要 铺垫 。 
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面向 对 象 的 JavaScript 


JavaScript 没有 提供 传统 面向 对 象 语言 中 的 类 式 继承 ,而 是 通过 原型 委托 的 方式 来 实现 对 象 
与 对 象 之 间 的 继承 。JavaScript 也 没有 在 语言 层面 提供 对 抽象 类 和 接口 的 支持 。 正 因为 存在 这 些 
跟 传统 面向 对 象 语言 不 一 致 的 地 方 ,我们 在 用 设计 模式 编写 代码 的 时 候 , 更 要 跟 传统 面向 对 象 语 
言 加 以 区 别 。 所 以 在 正式 学 习 设 计 模 式 之 前 ,我们 有 必要 先 了 解 一 些 JavaScript 在 面向 对 象 方面 
的 知识 。 


1.1 动态 类 型 语言 和 了 鸭子 类 型 

程 语 言 按照 数据 类 型 大 体 可 以 分 为 两 类 ， 一 类 是 静态 类 型 语言 ， 男 一 类 是 动态 类 型 语言 。 
态 类 型 语言 在 编译 时 便 已 确定 变量 的 类 型 , 而 动态 类 型 语言 的 变量 类 型 要 到 程序 运行 的 时 
候 ， 待 变量 被 赋予 某 个 值 之 后 ， 才 会 具有 某 种 类 型 。 

态 类 型 语言 的 优点 首先 是 在 编译 时 就 能 发 现 类 型 不 匹配 的 错误 , 编辑 器 可 以 帮助 我 们 提前 
避免 程序 在 运行 期 间 有 可 能 发 生 的 一 些 错误 。 其 次 ， 如 果 在 程序 中 明确 地 规定 了 数据 类 型 ,编译 
器 还 可 以 针对 这 些 信息 对 程序 进行 一 些 优化 工作 ， 提 高 程序 执行 速度 。 

静态 类 型 语言 的 缺点 首先 是 迫使 程序 员 依 照 强 契 约 来 编写 程序 ， 为 每 个 变量 规定 数据 类 型 ， 
归根 结 底 只 是 辅助 我 们 编写 可 靠 性 高 程序 的 一 种 手段 ， 而 不 是 编写 程序 的 目的 , 毕竟 大 部 分 人 编 
写 程序 的 目的 是 为 了 完成 需求 交付 生产 。 其 次 ， 类 型 的 声明 也 会 增加 更 多 的 代码 ,在 程序 编写 过 
程 中 ， 这 些 细节 会 让 程序 员 的 精力 从 思考 业务 逻辑 上 分 散 开 来 。 

动态 类 型 语言 的 优点 是 编写 的 代码 数量 更 少 , 看 起 来 也 更 加 简洁 , 程序 员 可 以 把 精力 更 多 地 
放 在 业务 逻辑 上 面 。 虽然 不 区 分 类 型 在 某 些 情况 下 会 让 程序 变 得 难以 理解 ,但 整体 而 言 ， 代 码 量 
越 少 ， 越 专注 于 逻辑 表达 ， 对 阅读 程序 是 越 有 帮助 的 。 

动态 类 型 语言 的 缺点 是 无 法 保证 变量 的 类 型 , 从 而 在 程序 的 运行 期 有 可 能 发 生 跟 类 型 相关 的 
错误 。 这 好 像 在 商店 买 了 一 包 和 牛肉 辣 条 ， 但 是 要 真正 吃 到 嘴 里 才 知 道 是 不 是 牛肉 味 。 


区 


慌 恒 


ES 
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在 JavaScript 中 ， 当 我 们 对 一 个 变量 赋值 时 ， 显 然 不 需要 考虑 它 的 类 型 ， 因 此 ，JavaScript 
是 一 门 典型 的 动态 类 型 语言 。 


动态 类 型 语言 对 变量 类 型 的 宽容 给 实际 编码 带 来 了 很 大 的 灵活 性 。 由 于 无 需 进行 类 型 检测 ， 


我 们 可 以 尝试 调用 任何 对 象 的 任意 方法 ， 而 无 需 去 考虑 它 原本 是 否 被 设计 为 拥有 该 方法 。 
这 一 切 都 建立 在 鸭子 类 型 ( duck typing ) 的 概念 上 ， 胸 子 类 型 的 通俗 说 法 是 :“ 如 果 它 走 起 
路 来 像 鸭子 ， 叫 起 来 也 是 有 鸭子， 那么 它 就 是 鸭子 。” 
我 们 可 以 通过 一 个 小 故事 来 更 深刻 地 了 解 岗子 类 型 


四 


从 前 在 JavaScript 王国 里 ， 有 一 个 国王 ， 他 觉得 世界 上 最 美妙 的 声音 就 是 鸭子 的 叫 
声 ， 于 是 国王 召集 大 臣 ， 要 组 建 一 个 1000 只 鸭子 组 成 的 合唱 团 。 大 丐 们 找 访 了 全 国 ， 
终于 找到 999 只 鸭子 , 但 是 始终 还 差 一 只 ,最 后 大 丐 发 现 有 一 只 非常 特别 的 鸡 ， 它 的 叫 
声 跟 鸭 子 一 模 一 样 ， 于 是 这 只 鸡 就 成 为 了 合唱 团 的 最 后 一 员 。 


这 个 故事 告诉 我 们 , 国王 要 听 的 只 是 鸭子 的 叫 声 , 这 个 声音 的 主人 到 底 是 鸡 还 是 鸭 并 不 重要 。 
岗子 类 型 指导 我 们 只 关注 对 象 的 行为 ， 而 不 关注 对 象 本 身 ， 也 就 是 关注 HAS-A, 而 不 是 IS-A。 
下 面 我 们 用 代码 来 模拟 这 个 故事 。 


var duck = { 
duckSinging: function(){ 
console.log( ' 嘎 嘎嘎 ' ); 
} 


}; 


var chicken = { 
duckSinging: function(){ 
console.log( ' 嘎 嘎嘎 ' ); 
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} 
}; 
var choir = []; // 合唱 团 
var joinChoir = function( animal ){ 
if ( animal && typeof animal.duckSinging === 'function' ){ 
choir.push( animal ); 
console.log(' 茶 喜 加 入 合唱 团 ' ); 
console.1log( ' 合 唱 团 已 有 成 员 数 量 :' + choir.length ); 


} 
}; 


joinChoir( duck ); // 茶 喜 加 入 合唱 团 

joinChoir( chicken ); // 茶 喜 加 入 合唱 团 

我 们 看 到 ,对 于 加 入 合唱 团 的 动物 ,大臣 们 根本 无 需 检查 它们 的 类 型 ,而 是 只 需要 保证 它们 
拥有 ducksinging 方法 。 如 果 下 次 期 望 加 入 合唱 团 的 是 一 只 小 狗 ， 而 这 只 小 狗 刚好 也 会 鸭子 叫 ， 
我 相信 这 只 小 狗 也 能 顺利 加 入 。 

在 动态 类 型 语言 的 面向 对 象 设 计 中 , 鸭子 类 型 的 概念 至 关 重 要 。 利 用 了 鸭子 类 型 的 思想 , 我们 
不 必 借助 超 类 型 的 帮助 ， 就 能 轻松 地 在 动态 类 型 语言 中 实现 一 个 原则 :“ 面 向 接口 编程 ， 而 不 是 
面向 实现 编程 ”。 例 如 ， 一 个 对 象 若 有 push 和 pop 方法 ， 并 且 这 些 方法 提供 了 正确 的 实现 ， 它 就 
可 以 被 当 作 栈 来 使 用 。 一 个 对 象 如 果 有 length 属性 ， 也 可 以 依照 下 标 来 存 取 属 性 ( 最 好 还 要 拥 
有 slice 和 splice 等 方法 )， 这 个 对 象 就 可 以 被 当 作 数 组 来 使 用 。 

在 静态 类 型 语言 中 ， 要 实现 “面向 接口 编程 ”并 不 是 一 件 容易 的 事情 ,往往 要 通过 抽象 类 或 
者 接口 等 将 对 象 进行 向 上 转型 。 当 对 象 的 真正 类 型 被 隐藏 在 它 的 超 类 型 身后 , 这 些 对 象 才能 在 类 
型 检查 系统 的 “监视 ”之 下 互相 被 替换 使 用 。 只 有 当 对 象 能 够 被 互相 替换 使 用 ,才能 体现 出 对 象 
多 态 性 的 价值 。 

“面向 接口 编程 ”是 设计 模式 中 最 重要 的 思想 ， 但 在 JavaScript 语 言 中 ,“ 面 向 接口 编程 ”的 
过 程 跟 主流 的 静态 类 型 语言 不 一 样 ， 因 此 ， 在 JavaScript 中 实现 设计 模式 的 过 程 与 在 一 些 我 们 熟 
悉 的 语言 中 实现 的 过 程 会 大 相 径 庭 。 


1.2 多 态 
“多 态 ” 一 词 源 于 希腊 文 polymorphism， 拆 开 来 看 是 poly ( 复数 ) + morph (形态 ) + ism， 
从 字面 上 我 们 可 以 理解 为 复数 形态 。 


多 态 的 实际 含义 是 : 同一 操作 作用 于 不 同 的 对 象 上 面 , 可 以 产生 不 同 的 解释 和 不 同 的 执行 结 
果 。 换 句 话 说 , 给 不 同 的 对 象 发 送 同一 个 消息 的 时 候 , 这 些 对 象 会 根据 这 个 消息 分 别 给 出 不 同 的 
反馈 。 


从 字面 上 来 理解 多 态 不 太 容 易 ， 下 面 我 们 来 举例 说 明 一 下 。 


一 
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主人 家 里 养 了 两 只 动物 ， 分 别 是 一 只 网 和 一 只 鸡 ， 当 主人 向 它们 发 出 “ 叫 ” 的 命令 
时 ， 鸭 会 “嘎嘎 嘎 ” 地 叫 ， 而 鸡 会 “ 略 略 咯 ” 地 叫 。 这 两 只 动物 都 会 以 自己 的 方式 来 发 
出 叫 声 。 它 们 同样 “都 是 动物 ， 并 且 可 以 发 出 叫 声 "， 但 根据 主人 的 指令 ， 它 们 会 各 自 
发 出 不 同 的 叫 声 。 


其 实 ， 其 中 就 蕴含 了 多 态 的 思想 。 下 面 我 们 通过 代码 进行 具体 的 介绍 。 


1.2.1 一 段 “ 多 态 ” 的 JavaScript 代 码 
我 们 把 上 面 的 故事 用 JavaScript 代码 实现 如 下 : 


var makeSound = function( animal ){ 
if ( animal instanceof Duck ){ 
console.1og(“ 嘎 嘎嘎 ); 
}else if ( animal instanceof Chicken ){ 
console.10g(“ 咯 咯咯 ' ); 
} 


}; 


var Duck = function(){}; 
var Chicken = function(){}; 


makeSound( new Duck() ); // 嘎嘎 嘎 
makeSound( new Chicken() );  // 咯咯 咯 


这 段 代码 确实 体现 了 “多 态 性 ”， 当 我 们 分 别 向 鸭 和 鸡 发 出 “叫唤 ”的 消息 时 ， 它 们 根据 此 
消息 作出 了 各 自 不 同 的 反应 。 但 这 样 的 “多 态 性 ”是 无 法 令 人 满意 的 ， 如 果 后 来 又 增加 了 一 只 动 
物 ， 比 如 狗 ， 显然 狗 的 叫 声 是 “汪汪 汪 ”， 此 时 我 们 必须 得 改动 makeSound 函数 ， 才 能 让 狗 也 发 出 
叫 声 。 修 改 代码 总 是 危险 的 ,修改 的 地 方 越 多 , 程序 出 错 的 可 能 性 就 越 大 ,而且 当 动物 的 种 类 越 
来 越 多 时 ，makeSound 有 可 能 变 成 一 个 巨大 的 函数 。 

多 态 背后 的 思想 是 将 “做 什么 ”和 “ 谁 去 做 以 及 怎样 去 做 ”分 离开 来 ， 也 就 是 将 “不 变 的 事 
物 ” 与 “可 能 改变 的 事物 ”分 离开 来 。 在 这 个 故事 中 ， 动 物 都 会 叫 ， 这 是 不 变 的 ， 但 是 不 同类 
型 的 动物 具体 怎么 叫 是 可 变 的 。 把 不 变 的 部 分 隔离 出 来 ,把 可 变 的 部 分 封装 起 来 ,这 给 予 了 我 们 
扩展 程序 的 能 力 ， 程 序 看 起 来 是 可 生长 的 ， 也 是 符合 开放 -封闭 原则 的 ， 相 对 于 修改 代码 来 说 ， 
仅仅 增加 代码 就 能 完成 同样 的 功能 ， 这 显然 优雅 和 安全 得 多 。 


1.2.2” ”对象 的 多 态 性 
下 面 是 改写 后 的 代码 ， 首 先 我 们 把 不 变 的 部 分 隔离 出 来 ， 那 就 是 所 有 的 动物 都 会 发 出 叫 声 : 


var makeSound = function( animal ){ 
animal.sound(); 


}; 
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然后 把 可 变 的 部 分 各 自封 装 起 来 ,我们 刚才 谈 到 的 多 态 性 实际 上 指 的 是 对 象 的 多 态 属 


var Duck = function(){} 


PT 


Duck.prototype.sound = function(){ 
console.log( ' 嘎 嘎嘎 ' ); 
}; 


var Chicken = function(){} 


Chicken.prototype.sound = function(){ 
console.1og(“ 咯 咯咯 " ); 


}; 
makeSound( new Duck() ); // 嘎嘎 嘎 
makeSound( new Chicken() ); // 咯咯 咯 


现在 我 们 向 鸭 和 鸡 都 发 出 “叫唤 ”的 消息 ,它们 接 到 消息 后 分 别 作 出 了 不 同 的 反应 。 如 果 有 
一 天 动物 世界 里 又 增加 了 一 只 狗 , 这 时 候 只 要 简单 地 追加 一 些 代 码 就 可 以 了 ,而 不 用 改动 以 前 的 
makeSound 国 数 ， 如 下 所 示 : 


var Dog = function(){} 


Dog.prototype.sound = function(){ 
console.log(“' 汪 汪汪 '" )) 


3 


makeSound( new Dog() ); // 汪汪 汪 


1.2.3 ”类 型 检查 和 多 态 
类 型 检查 是 在 表现 出 对 象 多 态 性 之 前 的 一 个 绕 不 开 的 话题 ， 但 JavaScript 是 一 门 不 必 进 行 类 
型 检查 的 动态 类 型 语言 , 为 了 真正 了 解 多 态 的 目的 , 我 们 需要 转 一 个 弯 , 从 一 门 静 态 类 型 语言 说 起 。 
我 们 在 1.1 节 已 经 说 明 过 静态 类 型 语言 在 编译 时 会 进行 类 型 匹配 检查 。 以 Java 为 例 , 由 于 在 
代码 编译 时 要 进行 严格 的 类 型 检查 , 所 以 不 能 给 变量 赋予 不 同类 型 的 值 , 这 种 类 型 检查 有 时候 会 
让 代码 显得 僵硬 ， 代 码 如 下 : 


String str; 


str = "abc"; // 没有 问题 
str = 2; // 报错 


现在 我 们 花 试 把 上 面 让 鸭子 和 鸡 叫 唤 的 例子 换 成 Java 代码 : 
public class Duck { // 鸭子 类 
public void makeSound(){ 
System.out.pTintln(“ 嘎 嘎嘎 "”); 
} 


} 
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public class Chicken { // 鸡 类 
public void makeSound(){ 
System.out.println(“" 咯 咯咯 "” ); 


public class AnimalSound { 
public void makeSound( Duck duck ){ // (1) 
duck.makeSound(); 
} 


} 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound = new AnimalSound(); 
Duck duck = new Duck(); 
animalSound.makeSound( duck ); // 输出 : 嘎嘎 嘎 
} 
} 


我 们 已 经 顺利 地 让 鸭子 可 以 发 出 叫 声 , 但 如 果 现 在 想 让 鸡 也 叫唤 起 来 , 我 们 发 现 这 是 一 件 不 
可 能 实现 的 事情 。 因 为 (1) 人 处 Animalsound 类 的 makesound 方法 ， 被 我 们 规定 为 只 能 接受 Duck 类 型 
的 参数 : 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound = new AnimalSound(); 
Chicken chicken = new Chicken(); 
animalSound.makeSound( chicken ); // 报错 ， 只 能 接受 Duck 类 型 的 参数 
} 
} 


某 些 时 候 ， 在 享受 静态 语言 类 型 检查 带 来 的 安全 性 的 同时 ， 我 们 亦 会 感觉 被 束缚 住 了 手脚 。 

为 了 解决 这 一 问题 , 静态 类 型 的 面向 对 象 语言 通常 被 设计 为 可 以 向 上 转型 : 当 给 一 个 类 变量 
赋值 时 ， 这 个 变量 的 类 型 既 可 以 使 用 这 个 类 本 身 ， 也 可 以 使 用 这 个 类 的 超 类 。 这 就 像 我 们 在 描述 
天 上 的 一 只 麻 稚 或 者 一 只 喜 更 时 ， 通 常 说 “一 只 麻 稚 在 飞 ” 或 者 “一 只 喜 竟 在 飞 ”。 但 如 果 想 忽 
略 它们 的 具体 类 型 ， 那 么 也 可 以 说 “一 只 鸟 在 飞 ”。 

同 理 , 当 Duck 对象 和 Chicken 对 象 的 类 型 都 被 隐藏 在 超 类 型 Animal 身后 ,Duck 对 象 和 Chicken 
对 象 就 能 被 交换 使 用 , 这 是 让 对 象 表现 出 多 态 性 的 必 经 之 路 ,而 多 态 性 的 表现 正 是 实现 众多 设计 
模式 的 目标 。 


1.2.4 ”使 用 继承 得 到 多 态 效果 
使 用 继承 来 得 到 多 态 效果 , 是 让 对 象 表现 出 多 态 性 的 最 常用 手段 。 继承 通常 包括 实现 继承 和 
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接口 继承 。 本 节 我 们 讨论 实现 继承 ， 接 口 继承 的 例子 请 参见 第 21 章 。 
我 们 先 创建 一 个 Animal 抽象 类 ， 再 分 别 让 Duck 和 Chicken 都 继承 自 Animal 抽象 类 ， 下 述 代 
码 中 (1) 处 和 (2) 处 的 赋值 语句 显然 是 成 立 的 ， 因 为 鸭子 和 鸡 也 是 动物 : 


public abstract class Animal { 
abstract void makeSound();  // 抽象 方法 


} 


public class Chicken extends Animal{ 
public void makeSound(){ 
System.out.pTintln(“ 咯 咯咯" ); 


} 


public class Duck extends Animal{ 
public void makeSound(){ 
System.out.pTintln(“ 嘎 嘎嘎 "”); 


} 


Animal duck = new Duck(); // (1) 
Animal chicken = new Chicken(); // (2) 


现在 剩 下 的 就 是 让 AnimalSound 类 的 makeSound 方法 接受 Animal 类 型 的 参数 ， 而 不 是 具体 的 
Duck 类 型 或 者 Chicken 类 型 . 


public class AnimalSound{ 
public void makeSound( Animal animal ){ // 接受 Animal 类 型 的 参数 
animal.makeSound(); 
} 
} 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound= new AnimalSound (); 
Animal duck = new Duck(); 
Animal chicken = new Chicken(); 
animalSound.makeSound( duck ); // 输出 嘎嘎 嘎 
animalSound.makeSound( chicken ); // 输出 咯咯 咯 


1.2.5 JavaScript 的 多 态 


从 前 面 的 讲解 我 们 得 知 ， 多 态 的 思想 实际 上 是 把 “做 什么 ”和 “ 谁 去 做 ”分 离开 来 ， 要 实现 
这 一 点 ,归根 结 底 先 要 消除 类 型 之 间 的 耦合 关系 。 如 果 类 型 之 间 的 耦合 关系 没有 被 消除 , 那么 我 
们 在 makesound 方法 中 指定 了 发 出 叫 声 的 对 象 是 某 个 类 型 , 它 就 不 可 能 再 被 蔡 换 为 另外 一 个 类 型 。 
在 Java 中 ， 可 以 通过 向 上 转型 来 实现 多 态 。 
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而 JavaScript 的 变量 类 型 在 运行 期 是 可 变 的 。 一 个 JavaScript 对 象 ， 既 可 以 表示 Duck 类 型 的 
对 象 ， 又 可 以 表示 Chicken 类 型 的 对 象 ， 这 意味 着 JavaScript 对 象 的 多 态 性 是 与 生 俱 来 的 。 

这 种 与 生 俱 来 的 多 态 性 并 不 难 解 释 。JavaScript 作为 一 门 动 态 类 型 语言 ， 它 在 编译 时 没有 类 型 
检查 的 过 程 , 既 没 有 检查 创建 的 对 象 类 型 , 又 没有 检查 传递 的 参数 类 型 ,在 1.2.2 节 的 代码 示例 中 ， 
我 们 既 可 以 往 makeSound 函数 里 传递 duck 对 象 当 作 参 数 ， 也 可 以 传递 chicken 对 象 当 作 参 数 。 

由 此 可 见 ， 某 一 种 动物 能 否 发 出 叫 声 ， 只 取决 于 它 有 没有 makeSound 方法 ， 而 不 取决 于 它 是 
否 是 某 种 类 型 的 对 象 ， 这 里 不 存在 任何 程度 上 的 “类 型 耦合 "。 这 正 是 我 们 从 上 一 节 的 鸭子 类 型 
中 领悟 的 道理 。 在 JavaScript 中 ， 并 不 需要 诸如 向 上 转型 之 类 的 技术 来 取得 多 态 的 效果 。 


1.2.6 多 态 在 面向 对 象 程序 设计 中 的 作用 


有 许多 人 认为 ， 多 态 是 面向 对 象 编程 语言 中 最 重要 的 技术 。 但 我 们 目前 还 很 难看 出 这 一 点 ， 
毕 况 大 部 分 人 都 不 关心 鸡 是 怎么 叫 的 , 也 不 想 知 道 鸭 是 怎么 叫 的 。 让 鸡 和 鸭 在 同一 个 消息 之 下 发 
出 不 同 的 叫 声 ， 这 跟 程序 员 有 什么 关系 呢 ? 


Martin Fowler 在 《 重 构 : 改善 既 有 代码 的 设计 》 里 写 到 : 
多 态 的 最 根本 好 处 在 于 ， 你 不 必 再 向 对 象 询 问 “ 你 是 什么 类 型 ”而 后 根据 得 到 的 答 


案 调用 对 象 的 某 个 行为 一 你 只 管 调用 该 行为 就 是 了 ,其 他 的 一 切 多 态 机 制 都 会 为 你 安 
排 受 当 。 


换 句 话说 , 多 态 最 根本 的 作用 就 是 通过 把 过 程 化 的 条 件 分 支 语句 转化 为 对 象 的 多 态 性 , 从 而 
消除 这 些 条 件 分 支 语 句 。 
Martin Fowler 的 话 可 以 用 下 面 这 个 例子 很 好 地 诠释 : 


在 电影 的 拍摄 现场 ， 当 导演 喊 出 “action” 时 ， 主 角 开 始 背 台词 ， 照 明 师 负 责 打 灯 
光 ， 后 面 的 群众 演员 假装 中 枪 倒 地 ， 道 具 师 往 镜头 里 撒 上 雪花 。 在 得 到 同一 个 消息 时 ， 
每 个 对 象 都 知道 自己 应 该 做 什么 。 如 果 不 利 用 对 象 的 多 态 性 ， 而 是 用 面向 过 程 的 方式 来 
编写 这 一 段 代码 ， 那 么 相当 于 在 电影 开始 拍摄 之 后 ， 导 演 每 次 都 要 走 到 每 个 人 的 面前 ， 
确认 它们 的 职业 分 工 (类 型 )， 然 后 告诉 他 们 要 做 什么 。 如 果 映 射 到 程序 中 ， 那 么 程序 
中 将 充斥 着 条 件 分 支 语句 。 


利用 对 象 的 多 态 性 ， 导 演 在 发 布 消息 时 ,就 不 必 考 虑 各 个 对 象 接 到 消息 后 应 该 做 什么 。 对 象 
应 该 做 什么 并 不 是 临时 决定 的 ,而 是 已 经 事先 约定 和 排练 完毕 的 。 每 个 对 象 应 该 做 什么 , 已 经 成 
为 了 该 对 象 的 一 个 方法 , 被 安装 在 对 象 的 内 部 ,每 个 对 象 负 责 它们 自己 的 行为 。 所 以 这 些 对 象 可 
以 根据 同一 个 消息 ， 有 条 不 麻 地 分 别 进行 各 自 的 工作 。 
将 行为 分 布 在 各 个 对 象 中 , 并 让 这 些 对 象 各 自负 责 自 己 的 行为 ,这 正 是 面向 对 象 设计 的 优点 。 
再 看 一 个 现实 开发 中 遇 到 的 例子 ， 这 个 例子 的 思想 和 动物 叫 声 的 故事 非常 相似 。 
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假设 我 们 要 编写 一 个 地 图 应 用 ， 现 在 有 两 家 可 选 的 地 图 API 提供 商 供 我 们 接 入 自己 的 应 用 


O 


目前 我 们 选择 的 是 谷歌 地 图 ,谷歌 地 图 的 API 中 提供 了 show 方 法 , 负责 在 页 面 上 展示 整个 地 图 。 


示例 代码 如 下 : 


var googleMap = { 
show: function(){ 
console.log( ' 开 始 演 染 谷 歌 地 图 ' ); 


} 
}; 


var renderMap = function(){ 
googleMap. show(); 


renderMap(); // 输出 : 开始 泻 染 谷歌 地 图 


后 来 因为 某 些 原因 ， 要 把 谷歌 地 图 换 成 百度 地 图 ， 为 了 让 renderMap 画 
我 们 用 一 些 条 件 分 支 来 让 renderMap 函数 同时 支持 谷歌 地 图 和 百度 地 图 : 


var googleMap = { 
show: function(){ 
console.1og(“ 开 始 泻 染 谷歌 地 图 ” ); 
} 


var baiduMap = { 
show: function(){ 
console.1og(“ 开 始 泻 染 百度 地 图 ' ); 
} 


}; 


var renderMap = function( type ){ 
if ( type === 'google' ){ 
googleMap. show(); 
}else if ( type === 'baidu' ){ 
baiduMap. show(); 


Bs 


renderMap( 'google' ); // 输出 : 开始 泻 染 谷歌 地 图 
renderMap( 'baidu' ); // 输出 : 开始 泻 染 百度 地 图 


可 以 看 到 ， 虽 然 renderMap 函数 目前 保持 了 一 定 的 弹性 ， 但 这 种 弹性 是 很 脆弱 的 ， 


函数 保持 一 定 的 弹性 ， 


替换 成 搜 搜 地 图 ， 那 无 疑 必须 得 改动 renderMap 函数 ， 继 续 往 里 面 堆砌 条 件 分 支 语句 。 


我 们 还 是 先 把 程序 中 相同 的 部 分 抽象 出 来 ， 那 就 是 显示 某 个 地 图 : 
var renderMap = function( map ){ 


if ( map.show instanceof Function ){ 
map. show(); 


’; 
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renderMap( googleMap ); // 输出 : 开始 演 染 谷歌 地 图 
renderMap( baiduMap ); // 输出 : 开始 演 染 百度 地 图 
现在 来 找 找 这 段 代 码 中 的 多 态 性 。 当 我 们 向 谷歌 地 图 对 象 和 百度 地 图 对 象 分 别 发 出 “展示 地 
图 ”的 消息 时 ， 会 分 别 调用 它们 的 show 方法 ， 就 会 产生 各 自 不 同 的 执行 结果 。 对 象 的 多 态 性 提 
示 我 们 ,“ 做 什么 ”和 “怎么 去 做 ”是 可 以 分 开 的 ， 即 使 以 后 增加 了 搜 搜 地 图 ，renderMap 函数 仍 
然 不 需要 做 任何 改变 ， 如 下 所 示 : 
var sosoMap = { 
show: function(){ 
console.1og(“ 开 始 泻 染 搜 搜 地 图 ' ); 
} 


}; 
renderMap( sosoMap ); // 输出 : 开始 演 染 搜 搜 地 图 


在 这 个 例子 中 , 我 们 假设 每 个 地 图 API 提供 展示 地 图 的 方法 名 都 是 show, 在 实际 开发 中 也 许 
不 会 如 此 顺利 ， 这 时 候 可 以 借助 适 配 带 模 式 来 解决 问题 。 


1.2.7 设计 模式 与 多 态 


GoF 所 著 的 《设计 模式 》 一 书 的 副 书 名 是 “可 复 用 面向 对 象 软件 的 基础 "。 该 书 完全 是 从 面 
向 对 象 设 计 的 角度 出 发 的 , 通过 对 封装 、 继 承 、 多 态 、 组 合 等 技术 的 反复 使 用 ,提炼 出 一 些 可 重 
复 使 用 的 面向 对 象 设 计 技 巧 。 而 多 态 在 其 中 又 是 重 中 之 重 , 绝 大 部 分 设计 模式 的 实现 都 离 不 开 多 
态 性 的 思想 。 

拿 命令 模式 "来 说 ， 请 求 被 封装 在 一 些 命令 对 象 中 ， 这 使 得 命令 的 调用 者 和 命令 的 接收 者 可 
以 完全 解 耦 开 来 ， 当 调用 命令 的 execute 方 法 时 ， 不 同 的 命令 会 做 不 同 的 事情 ， 从 而 会 产生 不 同 
的 执行 结果 。 而 做 这 些 事情 的 过 程 是 早已 被 封装 在 命令 对 象 内 部 的 ， 作 为 调用 命令 的 客户 ,根本 
不 必 去 关心 命令 执行 的 具体 过 程 。 

在 组 合 模式 "中 ， 多 态 性 使 得 客户 可 以 完全 忽略 组 合 对 象 和 叶 节 点 对 象 之 前 的 区 别 ， 这 正 是 
组 合 模式 最 大 的 作用 所 在 。 对 组 合 对 象 和 时节 点 对 象 发 出 同一 个 消息 的 时 候 , 它们 会 各 自 做 自己 
应 该 做 的 事情 , 组 合 对 象 把 消息 继续 转发 给 下 面 的 叶 节 点 对 象 , 叶 节 点 对 象 则 会 对 这 些 消息 作出 
真实 的 反馈 。 

在 策略 模式 中，Context 并 没有 执行 算法 的 能 力 ， 而 是 把 这 个 职责 委托 给 了 某 个 策略 对 象 。 
每 个 策略 对 象 负责 的 算法 已 被 各 自封 装 在 对 象 内 部 。 当 我 们 对 这 些 策略 对 象 发 出 “计算 ”的 消息 
时 ， 它 们 会 返回 各 自 不 同 的 计算 结果 。 


GD 参见 第 9 章 。 
@) 参见 第 10 章 。 
@ 参见 第 5 章 。 
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在 JavaScript 这 种 将 函数 作为 一 等 对 象 的 语言 


且 能 够 被 四 处 传递 。 当 我 们 对 一 些 函 数 发 出 “调用 ” 


， 了 因数 本 身 也 是 对 象 ,函数 用 来 封装 行为 并 
的 消息 时 ， 这 些 函 数 会 返回 不 同 的 执行 结 


果 , 这 是 “多 态 性 ”的 一 种 体现 , 也 是 很 多 设计 模式 在 JavaScript 中 可 以 用 高 阶 函 数 来 代替 实现 


的 原因 。 
1.3 封装 


封装 的 目的 是 将 信息 隐藏 。 


般 而 言 , 我 们 讨论 


的 封装 是 封装 数据 和 封装 实现 。 这 一 节 将 讨 


论 更 广义 的 封装 ， 不 仅 包 括 封装 数据 和 封装 实现 ， 还 包括 封装 类 型 和 封装 变化 。 


1.3.1 封装 数据 
在 许多 语言 的 对 象 系统 中 , 封装 数据 是 
public、protected 等 关键 字 来 提供 不 同 的 访问 权限 。 


但 JavaScript 并 没有 提供 对 这 些 关键 字 的 支持 ,我 们 只 能 依赖 变量 的 作用 域 来 实现 封装 特性 ， 


而 且 只 能 模拟 出 public 和 private 这 两 种 封装 性 。 


语法 解析 来 实现 的 , 这 些 语言 也 许 提供 了 private、 


除了 ECMAScript 6 中 提供 的 let 之 外 ， 一 般 我 们 通过 函数 来 创建 作用 域 : 


var myObject = (function(){ 
var _name = 'sven'; 
return { 
getName: function(){ 
return _ name; 


} 


// 私有 (private ) 变量 


} 
])); 


console.1og( my0bject.getName() ); // 输出 : sven 


console.log( myObject. name ) 


另外 值得 一 提 的 是 ， 在 ECAMScript 6 中 ， 还 可 以 通过 Symbol 创建 私有 属性 。 
详情 可 参阅 https:/Wgithub.conmylukehoban/es6features ， 二 维 码 见 右边 。 


1.3.2 ”封装 实现 


上 一 节 摘 述 的 封装 ， 
是 一 种 比较 狭义 的 定义 。 


// 公开 (public ) 方法 


// 输出 : undefined 


指 的 是 数据 层面 的 封装 。 有 时 候 我 们 喜欢 把 封装 等 同 于 封装 数据 , 但 这 


封装 的 目的 是 将 信息 隐藏 ， 封 装 应 该 被 视 为 “任何 形式 的 封装 ”， 也 就 是 说 ， 封 装 不 仅仅 是 


隐藏 数据 ， 还 包括 隐藏 实现 细节 、 设 计 细节 以 及 隐藏 对 象 的 类 型 等 。 


从 封装 实现 细节 来 讲 , 封装 使 得 对 象 内 部 的 变化 对 其 他 对 象 而 言 是 透明 的 , 也 就 是 不 可 见 的 。 
对 象 对 它 自 己 的 行为 负责 。 其 他 对 象 或 者 用 户 都 不 关心 它 的 内 部 实现 。 封 装 使 得 对 象 之 间 的 耦合 
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变 松散 ,对象 之 间 只 通过 暴露 的 API 接 口 来 通信 。 当 我 们 修改 一 个 对 象 时 ,可 以 随意 地 修改 它 的 
内 部 实现 ， 只 要 对 外 的 接口 没有 变化 ， 就 不 会 影响 到 程序 的 其 他 功能 。 

封装 实现 细节 的 例子 非常 之 多 。 拿 迭代 器 来 说 明 , 迭代 器 的 作用 是 在 不 暴露 一 个 聚合 对 象 的 
内 部 表示 的 前 提 下 ， 提 供 一 种 方式 来 顺序 访问 这 个 聚合 对 象 。 我 们 编写 了 一 个 each 函数 ， 它 的 
作用 就 是 过 历 一 个 聚合 对 象 ， 使 用 这 个 each 函数 的 人 不 用 关心 它 的 内 部 是 怎样 实现 的 ， 只 要 它 
提供 的 功能 正确 便 可 以 。 即 使 each 函数 修改 了 内 部 源 代 码 ， 只 要 对 外 的 接口 或 者 调用 方式 没有 
变化 ， 用 户 就 不 用 关心 它 内 部 实现 的 改变 。 


1.3.3 封装 类 型 


封装 类 型 是 静态 类 型 语言 中 一 种 重要 的 封装 方式 。 一 般 而 言 , 封装 类 型 是 通过 抽象 类 和 接口 
来 进行 的 "。 把 对 象 的 真正 类 型 隐藏 在 抽象 类 或 者 接口 之 后 ， 相 比 对 象 的 类 型 ， 客 户 更 关心 对 象 
的 行为 。 在 许多 静态 语言 的 设计 模式 中 , 想方设法 地 去 隐藏 对 象 的 类 型 ， 也 是 促使 这 些 模式 证 生 
的 原因 之 一 。 比 如 工矿 方法 模式 、 组 合 模式 等 。 

当然 在 JavaScript 中 , 并 没有 对 抽象 类 和 接口 的 支持 。JavaScript 本 身 也 是 一 门类 型 模糊 的 语 
言 。 在 封装 类 型 方面 JavaScript 没有 能 力 ， 也 没有 必要 做 得 更 多 。 对 于 JavaScript 的 设计 模式 实 
现 来 说 ,不 区 分 类 型 是 一 种 失色 ,也 可 以 说 是 一 种 解脱 。 在 后 面 章节 的 学 习 中 , 我 们 可 以 慢 慢 了 
解 这 一 点 。 


1.3.4 封装 变化 
从 设计 模式 的 角度 出 发 ， 封 装 在 更 重要 的 层面 体现 为 封装 变化 。 
《设计 模式 》 一 书 曾 提 到 如 下 文字 : 
“考虑 你 的 设计 中 哪些 地 方 可 能 变化 , 这 种 方式 与 关注 会 导致 重新 设计 的 原因 相反 。 


它 不 是 考虑 什么 时 候 会 迫使 你 的 设计 改变 ,而 是 考虑 你 怎样 才能 够 在 不 重新 设计 的 情况 
下 进行 改变 。 这 里 的 关键 在 于 封装 发 生变 化 的 概念 ， 这 是 许多 设计 模式 的 主题 。” 


这 段 文字 即 是 《设计 模式 》 提 到 的 “找到 变化 并 封装 之 "。《 设 计 模式 》 一 书 中 共 归 纳 总 结 了 23 
种 设计 模式 。 从 意图 上 区 分 , 这 23 种 设计 模式 分 别 被 划分 为 创建 型 模式 、 结 构 型 模式 和 行为 型 模式 。 

拿 创建 型 模式 来 说 ,要 创建 一 个 对 象 , 是 一 种 抽象 行为 ， 而 具体 创建 什么 对 象 则 是 可 以 变化 
的 ， 创 建 型 模式 的 目的 就 是 封装 创建 对 象 的 变化 。 而 结构 型 模式 封装 的 是 对 象 之 间 的 组 合 关系 。 
行为 型 模式 封装 的 是 对 象 的 行为 变化 。 

通过 封装 变化 的 方式 , 把 系统 中 稳定 不 变 的 部 分 和 容易 变化 的 部 分 隔离 开 来 , 在 系统 的 演变 
过 程 中 , 我 们 只 需要 蔡 换 那 些 容易 变化 的 部 分 ,如果 这 些 部 分 是 已 经 封装 好 的 ， 替 换 起 来 也 相对 


Qa 详情 可 参阅 1.2 节 中 的 Animal 示例 。 
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容易 。 这 可 以 最 大 程度 地 保证 程序 的 稳定 性 和 可 扩展 性 。 


从 《设计 模式 》 副 标题 “可 复 用 面向 对 象 软 件 的 基础 ”可 以 知道 ， 这 本 书 理应 教 我 们 如 何 编 
写 可 复 用 的 面向 对 象 程序 。 这 本 书 把 大 多 数 笔墨 都 放 在 如 何 封装 变化 上 面 , 这 跟 编写 可 复 用 的 面 
向 对 象 程序 是 不 矛盾 的 。 当 我 们 想 办 法 把 程序 中 变化 的 部 分 封装 好 之 后 , 剩 下 的 即 是 稳定 而 可 复 
用 的 部 分 了 。 


1.4 ”原型 模式 和 基于 原型 继承 的 JavaScript 对 象 系统 


在 Brendan Eich 为 JavaScript 设计 面向 对 象 系统 时 , 借鉴 了 Self 和 Smalltalk 这 两 门 基 于 原型 
的 语言 。 之 所 以 选择 基于 原型 的 面向 对 象 系统 ， 并 不 是 因为 时 间 勿 忙 ， 它 设计 起 来 相对 简单 ， 而 
是 因为 从 一 开始 Brendan Eich 就 没有 打算 在 JavaScript 中 加 入 类 的 概念 。 

在 以 类 为 中 心 的 面向 对 象 编程 语言 中 , 类 和 对 象 的 关系 可 以 想象 成 铸模 和 铸件 的 关系 , 对象 
总 是 从 类 中 创建 而 来 。 而 在 原型 编程 的 思想 中 , 类 并 不 是 必需 的 , 对 象 未 必需 要 从 类 中 创建 而 来 ， 
一 个 对 象 是 通过 克隆 另外 一 个 对 象 所 得 到 的 。 就 像 电影 《第 六 日 》 一 样 ， 通 过 克隆 可 以 创造 另外 
一 个 一 模 一 样 的 人 ， 而 且 本 体 和 克隆 体 看 不 出 任何 区 别 。 

原型 模式 不 单 是 一 种 设计 模式 ， 也 被 称 为 一 种 编程 泛 型 。 

本 节 我 们 将 首先 学 习 第 一 个 设计 模式 一 一 原型 模式 。 随 后 会 了 解 基于 原型 的 Io 语言 ， 借 助 
对 Io 语言 的 了 解 ， 我们 对 JavaScript 的 面向 对 象 系统 也 将 有 更 深 的 认识 。 在 本 节 的 最 后 , 我 们 将 
详细 了 解 JavaScript 语 言 如 何 通 过 原型 来 构建 一 个 面向 对 象 系统 。 


一 


1.4.1 使 用 克隆 的 原型 模式 


从 设计 模式 的 角度 讲 ， 原 型 模式 是 用 于 创建 对 象 的 一 种 模式 ， 如 果 我 们 想 要 创建 一 个 对 象 ， 
一 种 方法 是 先 指 定 它 的 类 型 ， 然 后 通过 类 来 创建 这 个 对 象 。 原 型 模式 选择 了 另外 一 种 方式 , 我 们 
不 再 关心 对 象 的 具体 类 型 ， 而 是 找到 一 个 对 象 ， 然 后 通过 克隆 来 创建 一 个 一 模 一 样 的 对 象 。 

既然 原型 模式 是 通过 克隆 来 创建 对 象 的 , 那么 很 自然 地 会 想到 ,如 果 需 要 一 个 跟 某 个 对 象 
模 一 样 的 对 象 ， 就 可 以 使 用 原型 模式 。 

假设 我 们 在 编写 一 个 飞机 大 战 的 网 页 游戏 。 某 种 飞机 拥有 分 身 技能 ， 当 它 使 用 分 身 技能 的 时 
候 ， 要 在 页 面 中 创建 一 些 跟 它 一 模 一 样 的 飞机 。 如 果 不 使 用 原型 模式 ， 那么 在 创建 分 身 之 前 ,无 
疑 必须 先 保存 该 飞机 的 当前 血 量 、 炮 弹 等 级 、 防 御 等 级 等 信息 ， 随 后 将 这 些 信息 设置 到 新 创建 的 
飞机 上 面 ， 这 样 才能 得 到 一 架 一 模 一 样 的 新 飞机 。 

如 果 使 用 原型 模式 ， 我 们 只 需要 调用 负责 克隆 的 方法 ， 便 能 完成 同样 的 功能 。 

原型 模式 的 实现 关键 ,是 语言 本 身 是 否 提 供 了 clone 方 法 ,ECMAScript 5 提供 了 object .create 
方法 ， 可 以 用 来 克隆 对 象 。 代 码 如 下 : 
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var Plane = function(){ 
this.blood = 100; 
this.attackLevel = 1; 
this.defenseLevel = 1; 


此 


var plane = new Plane(); 
plane.blood = 500; 

plane.attackLevel = 10; 
plane.defenseLevel = 7; 


var cloneplane = Object.create( plane ); 
console.log( clonePlane ); // 输出 : 0bject {blood: 500, attackLevel: 10, defenseLevel: 7} 


在 不 支持 0bject.create 方 法 的 浏览 器 中 ， 则 可 以 使 用 以 下 代码 : 


Object.create = Object.create || function( obj ){ 
var F = function(){}; 
F.prototype = obj; 


return new F(); 


1.4.2 ”克隆 是 创建 对 象 的 手段 


通过 上 一 节 的 代码 , 我 们 看 到 了 如 何 通过 原型 模式 来 克隆 出 一 个 一 模 一 样 的 对 象 。 但 原型 模 
式 的 真正 目的 并 非 在 于 需要 得 到 一 个 一 模 一 样 的 对 象 , 而 是 提供 了 一 种 便捷 的 方式 去 创建 某 个 类 
型 的 对 象 ， 克 隆 只 是 创建 这 个 对 象 的 过 程 和 手段 。 

在 用 Java 等 静态 类 型 语言 编写 程序 的 时 候 ， 类 型 之 间 的 解 看 非常 重要 。 依 赖 倒置 原则 提醒 
我 们 创建 对 象 的 时 候 要 避免 依赖 具体 类 型 ， 而 用 new XXX 创建 对 象 的 方式 显得 很 僵硬 。 工 厂 方法 
模式 和 抽象 工厂 模式 可 以 帮助 我 们 解决 这 个 问题 , 但 这 两 个 模式 会 带 来 许多 跟 产 品类 平行 的 工厂 
类 层次 ， 也 会 增加 很 多 额外 的 代码 。 

原型 模式 提供 了 另外 一 种 创建 对 象 的 方式 , 通过 克隆 对 象 , 我 们 就 不 用 再 关心 对 象 的 具体 类 
型 名 字 。 这 就 像 一 个 仙女 要 送 给 三 岁 小 女孩 生日 礼物 , 虽然 小 女孩 可 能 还 不 知道 飞机 或 者 船 怎 么 
说 ， 但 她 可 以 指 着 商店 橱柜 里 的 飞机 模型 说 “我 要 这 个 ”。 

当然 在 JavaScript 这 种 类 型 模糊 的 语言 中 ， 创 建 对 象 非常 容易 ， 也 不 存在 类 型 耦合 的 问题 。 
从 设计 模式 的 角度 来 讲 ， 原 型 模式 的 意义 并 不 算 大 。 但 JavaScript 本 身 是 一 门 基于 原型 的 面向 对 
象 语言 ， 它 的 对 象 系统 就 是 使 用 原型 模式 来 搭建 的 ， 在 这 里 称 之 为 原型 编程 范 型 也 许 更 合适 。 


1.4.3 ”体验 lo 语言 


前 面 说 过 ， 原 型 模式 不 仅仅 是 一 种 设计 模式 ， 也 是 一 种 编程 范 型 。JavaScript 就 是 使 用 原型 
模式 来 搭建 整个 面向 对 象 系统 的 。 在 JavaScript 语 言 中 不 存在 类 的 概念 ， 对 象 也 并 非 从 类 中 创建 
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出 来 的 ， 所 有 的 JavaScript 对 象 都 是 从 某 个 对 象 上 克隆 而 来 的 。 
对 于 习惯 了 以 类 为 中 心 语言 的 人 来 说 , 也 许 一 时 不 容易 理解 这 种 基于 原型 的 语言 。 即 使 是 对 
于 JavaScript 语 言 的 熟练 使 用 者 而 言 ， 也 可 能 会 有 一 种 “不 识 庐 山 真面目 ， 只 缘 身 在 此 山中 ”的 
感觉 。 事实 上 ,使 用 原型 模式 来 构造 面向 对 象 系统 的 语言 远 非 仅 有 JavaScript 一 家 。 
JavaScript 基于 原型 的 面向 对 象 系统 参考 了 Self 语言 和 Smalltalk 语言 ， 为 了 搞 清 JavaScript 
中 的 原型 , 我们 本 该 寻根 溯源 去 瞧 瞧 这 两 门 语言 。 但 由 于 这 两 门 语言 距离 现在 实在 太 遥 远 ,， 我们 
不 妨 转 而 了 解 一 下 另外 一 种 轻巧 又 基于 原型 的 语言 一 一 Io 语言 。 
Io 语 言 在 2002 年 由 Steve Dekorte 发 明 。 可 以 从 http:/iolanguage.com 下 载 到 Io 语言 的 解释 屁 ， 
装 好 之 后 打开 Io 解释 器 ， 输 入 经 典 的 “Hello World” 程 序 。 解 释 器 打印 出 了 Hello World 的 字 


误 灶 


， 这 说 明 我 们 已 经 可 以 使 用 Io 语言 来 编写 一 些小 程序 了 ， 如 图 1-1 所 示 。 


Io 291109965 
Io> "Hello World’’ print 


9 


Hello World==> Hello World 
Io> 


图 1-1 

作为 一 门 基于 原型 的 语言 ，Io 中 同样 没有 类 的 概念 ， 每 一 个 对 象 都 是 基于 另外 一 个 对 象 的 
克隆 。 

就 像 吸 血 鬼 的 故事 里 必然 有 一 个 吸血 鬼 祖 先 一 样 ， 既 然 每 个 对 象 都 是 由 其 他 对 象 克隆 而 来 
的 ， 那么 我 们 猜测 Io 语言 本 身 至 少 要 提供 一 个 根 对 象 ， 其 他 对 象 都 发 源 于 这 个 根 对 象 。 这 个 猜 
测 是 正确 的 ,在 Io 中 ， 根 对 象 名 为 Object。 

这 一 节 我 们 依然 拿 动 物 世界 的 例子 来 讲解 To 语言。 在 下 面 的 代码 中 ,通过 克隆 根 对 象 0bject， 
就 可 以 得 到 另外 一 个 对 象 Animnal。 虽 然 Animal 是 以 大 写 开 头 的 ， 但 是 记 住 Io 中 没有 类 ，Animal 
跟 所 有 的 数据 一 样 都 是 对 象 。 

Animal := 0bject clone // 克隆 动物 对 象 

现在 通过 克隆 根 对 象 0bject 得 到 了 一 个 新 的 Animal 对 象 ， 所 以 0bject 就 被 称 为 Animal 的 原 
型 。 目 前 Animal 对 象 和 它 的 原型 0bject 对 象 一 模 一 样 ， 还 没有 任何 属于 它 自己 方法 和 能 力 。 我 
们 假设 在 Io 的 世界 里 , 所 有 的 动物 都 会 发 出 叫 声 , 那么 现在 就 给 Animal 对 象 添 加 makeSsound 方法 
吧 。 代 码 如 下 : 


Animal makeSound := method( "animal makeSound " print ); 


好 了 ,现在 所 有 的 动物 都 能 够 发 出 叫 声 了 ,那么 再 来 继续 创建 一 个 Dog 对 象 . 显 而 易 见 ,Animal 
对 象 可 以 作为 Dog 对 象 的 原型 ，Dog 对 象 从 Animal 对 象 元 隆 而 来 : 


Dog := Animal clone 


可 以 确定 ，Dog 一 定 懂得 怎么 吃食 物 ， 所 以 接 下 来 给 Dog 对 象 添加 eat 方法 : 
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Dog eat = method( "dog eat " print ); 


现在 已 经 完成 了 整个 动物 世界 的 构建 , 通过 一 次 次 克隆 , Io 的 对 象 世 界 里 不 再 只 有 形 单 影 只 
的 根 对 象 0bject ， 而 是 多 了 两 个 新 的 对 象 : Animal 对 象 和 Dog 对 象 。 其 中 Dog 的 原型 是 Animal， 
Animal 对 象 的 原型 是 0bject。 最 后 我 们 来 测试 Animal 对 象 和 Dog 对 象 的 功能 。 
尝试 调用 Animal 的 makesound 方法， 可 以 看 到 ， 动 物 顺利 发 出 了 叫 声 : 
Animal makeSound // 输出 : animal makeSound 
然后 再 调用 Dog 的 eat 方法 ， 同 样 我 们 也 看 到 了 预期 的 结果 : 


Dog eat ”// 输出 : dog eat 


1.4.4 ”原型 编程 范 型 的 一 些 规则 


从 上 一 节 的 讲解 中 ， 我 们 看 到 了 如 何在 Io 语言 中 从 无 到 有 地 创建 一 些 对 象 。 跟 使 用 “类 ” 
的 语言 不 一 样 的 地 方 是 , Io 语言 中 最 初 只 有 一 个 根 对 象 0bject,， 其 他 所 有 的 对 象 都 克隆 自 另 外 一 
个 对 象 。 如 果 A 对 象 是 从 B 对 象 克隆 而 来 的 ， 那 么 B 对 象 就 是 A 对 象 的 原型 。 

在 上 一 小 节 的 例子 中 , 0bject 是 Animal 的 原型 ， 而 Animal 是 Dog 的 原型 , 它们 之 间 形 成 了 一 
条 原型 链 。 这 个 原型 链 是 很 有 用 处 的 ， 当 我 们 尝试 调用 Dog 对象 的 某 个 方法 时 ， 而 它 本 身 却 没有 
这 个 方法 ,那么 Dog 对 象 会 把 这 个 请 求 委托 给 它 的 原型 Animal 对 象 ， 如 果 Animal 对 象 也 没有 这 
属性 ， 那 么 请 求 会 顺 着 原型 链 继续 被 委托 给 Animal 对 象 的 原型 0bject 对 象 ， 这 样 一 来 便 能 得 
到 继承 的 效果 ， 看 起 来 就 像 Animal 是 Dog 的 “ 父 类 ”，0bject 是 Animal 的 “ 父 类 ”。 

这 个 机 制 并 不 复杂 ， 却 非常 强大 ，Io 和 JavaScript 一 样 ， 基 于 原型 链 的 委托 机 制 就 是 原型 继 
承 的 本 质 。 

我 们 来 进行 一 些 测试 。 在 Io 的 解释 器 中 执行 Dog makeSound 时 ，Dog 对 象 并 没有 makeSound 方 
法 , 于 是 把 请 求 委 托 给 了 它 的 原型 Animal 对 象 ， 而 Animal 对 象 是 有 makeSound 方法 的 , 所 以 该 条 
语句 可 以 顺利 得 到 输出 ， 如 图 1-2 所 示 。 

Io> Dog makeSound 


CUPUEY NEDA A | 
| 


> 


图 1-2 
现在 我 们 明白 了 原型 编程 中 的 一 个 重要 特性 ， 即 当 对 象 无 法 响应 某 个 请 求 时 , 会 把 该 请 求 委 
托 给 它 自己 的 原型 。 
最 后 整理 一 下 本 节 的 描述 ， 我 们 可 以 发 现 原型 编程 范 型 至 少 包 括 以 下 基本 规则 。 


口 所 有 的 数据 都 是 对 象 。 
口 要 得 到 一 个 对 象 ， 不 是 通过 实例 化 类 ， 而 是 找到 一 个 对 象 作为 原型 并 克隆 它 。 
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口 对 象 会 记 住 它 的 原型 。 
口 如 果 对 象 无 法 响应 某 个 请 求 ， 它 会 


这 个 请 求 委 托 给 它 自己 的 原型 。 


[二 


1.4.5 _ JavaScript 中 的 原型 继承 


刚刚 我 们 已 经 体验 过 同样 是 基于 原型 编程 的 Io 语言 ， 也 已 经 了 解 了 在 Io 语言 中 如 何 通 过 原 
型 链 来 实现 对 象 之 间 的 继承 关系 。 在 原型 继承 方面 ，JavaScript 的 实现 原理 和 Io 语言 非常 相似 ， 
JavaScript 也 同样 遵守 这 些 原 型 编程 的 基本 规则 。 
口 所 有 的 数据 都 是 对 象 。 
口 要 得 到 一 个 对 象 ， 不 是 通过 实例 化 类 ， 而 是 找到 一 个 对 象 作为 原型 并 克隆 它 。 
口 对 象 会 记 住 它 的 原型 。 
口 如 果 对 象 无 法 响应 某 个 请 求 ， 它 会 把 这 个 请 求 委 托 给 它 自 己 的 原型 。 

下 面 我 们 来 分 别 讨论 JavaScript 是 如 何在 这 些 规则 的 基础 上 来 构建 它 的 对 象 系统 的 。 

1. 所 有 的 数据 都 是 对 象 

JavaScript 在 设计 的 时 候 ， 模 仿 Java 引入 了 两 套 类 型 机 制 : 基本 类 型 和 对 象 类 型 。 基 本 类 型 
包括 undefined、number 、boolean 、string、function 、object。 从 现在 看 来 ， 这 并 不 是 一 个 好 的 
想法 。 

按照 JavaScript 设计 者 的 本 意 ， 除 了 undefined 之 外 ， 一 切 都 应 是 对 象 。 为 了 实现 这 一 目标 ， 
number 、boolean、string 这 几 种 基本 类 型 数据 也 可 以 通过 “包装 类 ”的 方式 变 成 对 象 类 型 数据 来 
处 理 。 

我 们 不 能 说 在 JavaScript 中 所 有 的 数据 都 是 对 象 ， 但 可 以 说 绝 大 部 分 数据 都 是 对 象 。 那 么 相 
信 在 JavaScript 中 也 一 定 会 有 一 个 根 对 象 存在 ， 这 些 对 象 追 根 溯源 都 来 源 于 这 个 根 对 象 。 
事实 上 ，JavaScript 中 的 根 对 象 是 0bject.prototype 对 象 。0bject.prototype 对 象 是 一 个 空 的 
对 象 。 我 们 在 JavaScript 遇 到 的 每 个 对 象 ， 实 际 上 都 是 从 0bject.prototype 对 象 克隆 而 来 的 ， 
0bject .prototype 对 象 就 是 它们 的 原型 。 比 如 下 面 的 obj1 对 象 和 obj2 对 象 


var obj1 = new Object(); 
var obj2 = {}; 


可 以 利用 ECMAScript 5 提供 的 0bject.getPrototype0f 来 查看 这 两 个 对 象 的 原型 ; 


console.1og( Object.getPrototypeOf( obj1 
console.1og( Object.getPrototypeOf( obj2 


2. 要 得 到 一 个 对 象 ， 不 是 通过 实例 化 类 ， 而 是 找到 一 个 对 象 作为 原型 并 克隆 它 


在 Io 语言 中 ， 克 隆 一 个 对 象 的 动作 非常 明显 ， 我 们 可 以 在 代码 中 清晰 地 看 到 clone 的 过 程 。 
比如 以 下 代码 : 


= Object.prototype ); // 输出 : true 


) == 
) === Object.prototype ); // 输出 : true 
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Dog := Animal clone 


但 在 JavaScript 语言 里 ， 我 们 并 不 需要 关心 克隆 的 细节 ， 因 为 这 是 引擎 内 部 负责 实现 的 。 我 
们 所 需要 做 的 只 是 显 式 地 调用 var obj1 = new 0bject() 或 者 var obj2 = {}。 此 时 ， 引 警 内 部 会 从 
0bject .prototype 上 面 克隆 一 个 对 象 出 来 ， 我 们 最 终 得 到 的 就 是 这 个 对 象 。 

再 来 看 看 如 何 用 new 运算 符 从 构造 器 中 得 到 一 个 对 象 ， 下 面 的 代码 我 们 再 熟悉 不 过 了 : 


function Person( name ){ 
this.name = name; 


}; 


Person.prototype.getName = function(){ 
return this.name; 

2 

var a = new Person( 'sven' ) 

console.log( a.name ); // 输出 : sven 


console.log( a.getName() ); // 输出 : sven 
console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出 : true 


在 JavaScript 中 没有 类 的 概念 , 这 人 句 话 我 们 已 经 重复 过 很 多 次 了 。 但 刚才 不 是 明明 调用 了 new 
Person() 吗 ? 

在 这 里 Person 并 不 是 类 ， 而 是 函数 构造 器 ，JavaScript 的 函数 既 可 以 作为 普通 函数 被 调用 ， 
也 可 以 作为 构造 器 被 调用 。 当 使 用 new 运算 符 来 调用 函数 时 ， 此 时 的 函数 就 是 一 个 构造 问 。 用 
new 运算 符 来 创建 对 象 的 过 程 ， 实 际 上 也 只 是 先 克 隆 0bject.prototype 对 象 ， 再 进行 一 些 其 他 额 
外 操作 的 过 程 。? 

在 Chrome 和 Firefox 等 向 外 暴露 了 对 象 _proto_ 属性 的 浏览 器 下 ,我 们 可 以 通过 下 面 这 段 代 
码 来 理解 new 运算 的 过 程 : 


function Person( name ){ 
this.name = name; 


}; 


Person.prototype.getName = function(){ 
return this.name; 


Bs 


var objectFactory = function(){ 
var obj = new Object(), // 从 0bject.prototype 上 克隆 一 个 空 的 对 象 
Constructor = [].shift.call( arguments ); // 取得 外 部 传 入 的 构造 器 ， 此 例 是 Person 


GD JavaScript 是 通过 克隆 0bject.prototype 来 得 到 新 的 对 象 , 但 实际 上 并 不 是 每 次 都 真正 地 克隆 了 一 个 新 的 对 象 。 从 
内 存 方面 的 考虑 出 发 ，JavaScript 还 做 了 一 些 额外 的 处 理 ， 具 体 细 节 可 以 参阅 周 爱民 老师 编著 的 《JavaScript 语言 
精髓 与 编程 实践 》 这 里 不 做 深入 讨论 ， 我们 暂且 把 创建 对 象 的 过 程 看 成 完 完全 全 的 克隆 。 
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obj. proto = Constructor.prototype; // 指向 正确 的 原型 
var ret = Constructor.apply( obj, arguments ); // 借用 外 部 传 入 的 构造 器 给 obj 设置 属性 


return typeof ret === 'object' ? ret : obj; // 确保 构造 器 总 是 会 返回 一 个 对 象 


}; 
var a = objectFactory( Person, 'sven' ); 


console.log( a.name ); // 输出 : sven 
console.log( a.getName() ); // 输出 : sven 
console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出 : true 


我 们 看 到 ,分别 调用 下 面 两 句 代码 产生 了 一 样 的 结 


var a 
var a 


objectFactory( A, 'sven' ); 
new A( 'sven' ); 


3. 对 象 会 记 住 它 的 原型 

如 果 请 求 可 以 在 一 个 链条 中 依次 往 后 传递 ,那么 每 个 节点 都 必须 知道 它 的 下 一 个 节点 。 同 理 ， 
要 完成 Io 语言 或 者 JavaScript 语 言 中 的 原型 链 查找 机 制 ,每 个 对 象 至 少 应 该 先 记 住 它 自 己 的 原型 。 

目前 我 们 一 直 在 讨论 “对 象 的 原型 ”， 就 JavaScript 的 真正 实现 来 说 ， 其 实 并 不 能 说 对 象 有 
原型 ， 而 只 能 说 对 象 的 构造 器 有 原型 。 对 于 “对 象 把 请 求 委托 给 它 自 己 的 原型 ”这 句 话 ， 更 好 
的 说 法 是 对 象 把 请 求 委 托 给 它 的 构造 器 的 原型 。 那 么 对 象 如 何 把 请 求 顺 利 地 转交 给 它 的 构造 器 
的 原型 呢 ? 

JavaScript 给 对 象 提 供 了 一 个 名 为 _proto_ 的 隐藏 属性 ， 某 个 对 象 的 _proto 属性 默认 会 指 
癌 它 的 构造 磊 的 原型 对 象 ， 即 {Constructor}.prototype。 在 一 些 浏览 器 中 ， _proto_ 被 公开 出 来 ， 
我 们 可 以 在 Chrome 或 者 Firefox 上 用 这 段 代 码 来 验证 : 


var a = new Object(); 
console.log ( a. proto === Object.prototype ); // 输出 : true 


实际 上 ，_proto “就 是 对 象 跟 “对 象 构造 器 的 原型 ”联系 起 来 的 纽带 。 正 因为 对 象 要 通过 
proto_ 属 性 来 记 住 它 的 构造 器 的 原型 ， 所 以 我 们 用 上 一 节 的 objectFactory 国 数 来 模拟 用 new 
创建 对 象 时 ， 需要 手动 给 obj 对 象 设置 正确 的 _proto_ 指 向 。 

obj._proto = Constructor.prototype; 

通过 这 人 句 代 码 ,我 们 让 obj. proto “指向 Person.prototype, 而 不 是 原来 的 0bject.prototype。 

4. 如 果 对 象 无 法 响应 某 个 请 求 ， 它 会 把 这 个 请 求 委 托 给 它 的 构造 器 的 原型 

这 条 规则 即 是 原型 继承 的 精髓 所 在 。 从 对 Io 语言 的 学 习 中 ， 我 们 已 经 了 解 到 ， 当 一 个 对 象 


无 法 响应 某 个 请 求 的 时 候 , 它 会 顺 着 原型 链 把 请 求 传 递 下 去 , 直到 遇 到 一 个 可 以 处 理 该 请 求 的 对 
象 为 止 。 
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JavaScript 的 克隆 跟 Io 语言 还 有 点 不 一 样 ，Io 中 每 个 对 象 都 可 以 作为 原型 被 克隆 ， 当 Animal 
对 象 克隆 自 0bject 对 象 ，Dog 对 象 又 克隆 自 Animal 对 象 时 ， 便 形成 了 一 条 天 然 的 原型 链 ， 如 图 


1-3 所 示 。 


图 1-3 


而 在 JavaScript 中 ， 每 个 对 象 都 是 从 0bject.prototype 对 象 克隆 而 来 的 ， 如 果 是 这 样 的 话 ， 
我 们 只 能 得 到 单一 的 继承 关系 ， 即 每 个 对 象 都 继承 自 0bject.prototype 对 象 ， 这 样 的 对 象 系统 显 
然 是 非常 受 限 的 。 

实际 上 上， 虽然 JavaScript 的 对 象 最 初 都 是 由 0bject.prototype 对 象 克 隆 而 来 的 ， 但 对 象 构造 
器 的 原型 并 不 仅 限 于 0bject.prototype 上 ， 而 是 可 以 动态 指向 其 他 对 象 。 这 样 一 来 ， 当 对 象 需 
要 借用 对 象 b 的 能 力 时 ， 可 以 有 选择 性 地 把 对 象 a 的 构造 器 的 原型 指向 对 象 b， 从 而 达到 继承 的 
效果 。 下面 的 代码 是 我 们 最 常用 的 原型 继承 方式 : 


var obj = { name: 'sven' }; 


var A = function(){}; 
A.prototype = obj; 


var a = new A(); 
console.log( a.name ); // 输出 : sven 


我 们 来 看 看 执行 这 段 代码 的 时 候 ， 引 擎 做 了 哪些 事情 。 

口 首先 ， 尝 试 遍 历 对 象 a 中 的 所 有 属性 ， 但 没有 找到 name 这 个 属性 。 
口 查找 name 属性 的 这 个 请 求 被 委托 给 对 象 a 的 构造 器 的 原型 ， 它 被 aproto “记录 着 并 且 
指向 A.prototype， 而 A.prototype 被 设置 为 对 象 obj。 

口 在 对 象 obj 中 找到 了 name 属性 ， 并 返回 它 的 值 。 

当 我 们 期 望 得 到 一 个 “类 ”继承 自 另 外 一 个 “类 ”的 效果 时 , 往往 会 用 下 面 的 代码 来 模拟 实现 : 


var A = function(){}; 
A.prototype = { name: 'sven' }; 


var B = function(){}; 
B.prototype = new A(); 


var b = new B(); 
console.log( b.name ); // 输出 : sven 


再 看 这 段 代码 执行 的 时 候 ， 引 擎 做 了 什么 事情 。 
口 首先 ， 尝 试 遍历 对 象 b 中 的 所 有 属性 ， 但 没有 找到 name 这 个 属性 。 
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口 查找 name 属性 的 请 求 被 委托 给 对 象 b 的 构造 器 的 原型 ， 它 被 bproto “记录 着 并 且 指 向 
B.prototype， 而 B.prototype 被 设置 为 一 个 通过 new A() 创 建 出 来 的 对 象 。 

口 在 该 对 象 中 依然 没有 找到 name 属性 ， 于 是 请 求 被 继续 委托 给 这 个 对 象 构 造 右 的 原型 
A.prototype。 

口 在 A.prototype 中 找到 了 name 属性 ， 并 返回 它 的 值 。 


和 把 B.prototype 直接 指向 一 个 字面 量 对 象 相 比 ， 通 过 B.prototype = new A() 形 成 的 原型 链 比 
之 前 多 了 一 层 。 但 二 者 之 间 没 有 本 质 上 的 区 别 , 都 是 将 对 象 构造 器 的 原型 指向 男 外 一 个 对 象 ， 继 
承 总 是 发 生 在 对 象 和 对 象 之 间 。 

最 后 还 要 留意 一 点 ， 原 型 链 并 不 是 无 限 长 的 。 现 在 我 们 尝试 访问 对 象 a 的 address 属性 。 而 
对 象 b 和 它 构造 器 的 原型 上 都 没有 address 属性 ， 那 么 这 个 请 求 会 被 最 终 传递 到 哪里 呢 ? 

实际 上 ， 当 请 求 达到 A.prototype， 并 且 在 A.prototype 中 也 没有 找到 address 属性 的 时 候 ， 
请 求 会 被 传递 给 A.prototype 的 构造 器 原型 0bject.prototype， 显 然 0bject.prototype 中 也 没有 
address 属性 ,但 0bject.prototype 的 原型 是 null, 说 明 这 时 候 原型 链 的 后 面 已 经 没有 别 的 节点 了 。 
所 以 该 次 请 求 就 到 此 打住 ，a.address 返回 undefined。 


a.address // 输出 : undefined 


1.4.6 ”原型 继承 的 未 来 


设计 模式 在 很 多 时 候 其 实 都 体现 了 语言 的 不 足 之 处 。Peter Norvig 曾 说 ,设计 模式 是 对 语言 
不 足 的 补充 ， 如 果 要 使 用 设计 模式 ， 不 如 去 找 一 门 更 好 的 语言 。 这 句 话 非常 正确 。 不 过 ， 作 为 
Web 前 端 开发 者 ， 相 信 JavaScript 在 未 来 很 长 一 段 时 间 内 都 是 唯一 的 选择 。 虽 然 我 们 没有 办 法 换 
门 语言 , 但 语言 本 身 也 在 发 展 , 说 不 定 哪 天 某 个 模式 在 JavaScript 中 就 已 经 是 天 然 的 存在 , 不 再 
需要 拐弯 抹 角 来 实现 。 比 如 0bject.create 就 是 原型 模式 的 天 然 实现 。 使 用 0bject.create 来 完成 原 
型 继承 看 起 来 更 能 体现 原型 模式 的 精髓 。 目 前 大 多 数 主流 浏览 器 都 提供 了 object.create 方 法 。 
但 美中不足 是 在 当前 的 JavaScript 引擎 下 , 通过 0bject.create 来 创建 对 象 的 效率 并 不 高 , 通 
常 比 通过 构造 函数 创建 对 象 要 慢 。 此 外 还 有 一 些 值得 注意 的 地 方 ， 比 如 通过 设置 构造 器 的 
prototype 来 实现 原型 继承 的 时 候 , 除了 根 对 象 0bject.prototype 本 身 之 外 , 任何 对 象 都 会 有 一 个 
原型 。 而 通过 0bject.create( null ) 可 以 创建 出 没有 原型 的 对 象 。 


另外 ，ECMAScript 6 带 来 了 新 的 Class 语法 。 这 让 JavaScript 看 起 来 像 是 一 门 基于 类 的 语言 ， 
但 其 背后 仍 是 通过 原型 机 制 来 创建 对 象 。 通 过 Class 创建 对 象 的 一 段 简单 示例 代码 "如 下 所 示 : 
class Animal { 


constructor(name) { 
this.name = name; 


} 


Qa 这 段 代码 来 自 http://jurberg.github.io/blog/2014/07/12/javascript-prototype/。 
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getName() { 
return this.name; 


} 
} 


class Dog extends Animal { 
constructor(name) { 
super(name); 


} 
speak() { 
return "woof"; 


} 
} 


var dog = new Dog("Scamp"); 
console.log(dog.getName() + ' says ' + dog.speak()); 


1.4.6 ”小 结 

本 节 讲 述 了 本 书 的 第 一 个 设计 模式 一 一 原型 模式 。 原 型 模式 是 一 种 设计 模式 , 也 是 一 种 编程 
泛 型 , 它 构成 了 JavaScript 这 门 语言 的 根本 。 本 节 首 先 通 过 更 加 简单 的 Io 语言 来 引入 原型 模式 的 
概念 ， 随 后 学 习 了 JavaScript 中 的 原型 模式 。 原 型 模式 十 分 重要 ， 和 JavaScript 开发 者 的 关系 十 
分 密切 。 通 过 原型 来 实现 的 面向 对 象 系统 虽然 简单 ， 但 能 力 同 样 强大 。 
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this、call 和 apply 


在 JavaScript 编程 中 ，this 关键 字 总 是 让 初学 者 感到 迷惑 ，Function.prototype.call 和 
Function.prototype.apply 这 两 个 方法 也 有 着 广泛 的 运用 。 我 们 有 必要 在 学 习 设计 模式 之 前 先 理解 
这 几 个 概念 。 


2.1 this 


跟 别 的 语言 大 相 径 庭 的 是 ，JavaScript 的 this 总 是 指向 一 个 对 象 ， 而 具体 指向 哪个 对 象 是 在 
运行 时 基于 函数 的 执行 环境 动态 绑 定 的 ， 而 非 函 数 被 声明 时 的 环境 。 
2.1.1 this 的 指向 

除去 不 常用 的 with 和 eval 的 情况 , 具体 到 实际 应 用 中 , this 的 指向 大 致 可 以 分 为 以 下 4 种 。 
口 作为 对 象 的 方法 调用 。 
口 作为 普通 函数 调用 。 
口 构造 需 调 用 。 
口 Function.prototype.call 或 Function.prototype.apply 调用 。 
下 面 我 们 分 别 进行 介绍 。 
1. 作为 对 象 的 方法 调用 
当 函 数 作为 对 象 的 方法 被 调用 时 ，this 指向 该 对 象 : 
var obj = { 

a2 了 

getA: function(){ 


alert ( this === obj ); // 输出 : true 
alert ( this.a ); // 输出 : 1 


}; 
obj.getA(); 
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2. 作为 普通 函数 调用 
当 孙 数 不 作 为 对 象 的 属性 被 调用 时 ， 也 就 是 我 们 常 说 的 普通 函数 方式 ， 此 时 的 this 总 是 指 
向 全 局 对 象 。 在 浏览 器 的 JavaScript 里 ， 这 个 全 局 对 象 是 window 对 象 。 


window.name = “globalName '; 


var getName = function(){ 
return this.name; 


}; 
console.1og( getName() ); // 输出 : globalName 


或 者 : 
window.name = “globalName '; 


var myObject = { 
name: 'sven', 
getName: function(){ 
return this.name; 
4 


}; 


var getName = myObject.getName; 
console.1og( getName() ); // globalName 


有 时 候 我 们 会 遇 到 一 些 困 扰 , 比如 在 div 节点 的 事件 函数 内 部 , 有 一 个 局 部 的 callback 方法 ， 
callback 被 作为 普通 函数 调用 时 ，callback 内 部 的 this 指向 了 window, 但 我 们 往往 是 想 让 它 指向 
该 div 节点 ， 见 如 下 代码 : 


<html> 
<body> 
<div id="div1"> 我 是 一 个 div</div> 
</body> 
<script> 


window.id = 'window'; 


document .getElementById( 'div1' ).onclick = function(){ 


alert ( this.id ); // 输出 : "div1' 
var callback = function(){ 
alert ( this.id ); // 输出 : "window' 

} 
callback(); 

}; 

</script> 

</html> 


此 时 有 一 种 简单 的 解决 方案 ， 可 以 用 一 个 变量 保存 div 节点 的 引用 : 
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document .getElementById( 'div1' ).onclick = function(){ 
var that = this; // 保存 div 的 引用 
var callback = function(){ 
alert ( that.id ); // 输出 : "div1" 


} 
callback(); 


在 ECMAScript5 的 strict 模式 下 ,这 种 情况 下 的 this 已 经 被 规定 为 不 会 指向 全 局 对 象 ， 而 


是 undefined: 


function func(){ 
"use strict" 
alert ( this ); // 输出 : undefined 


} 

func(); 

3. 构造 器 调用 

JavaScript 中 没有 类 ， 但 是 可 以 从 构造 器 中 创建 对 象 ， 同 时 也 提供 了 new 运算 符 ， 使 得 构造 
器 看 起 来 更 像 一 个 类 。 

除了 宿主 提供 的 一 些 内 置 函 数 ， 大 部 分 JavaScript 函数 都 可 以 当 作 构造 器 使 用 。 构 造 器 的 外 
表 跟 普通 函数 一 模 一 样 ， 它 们 的 区 别 在 于 被 调用 的 方式 。 当 用 new 运算 符 调用 函数 时 ,该 函数 总 
会 返回 一 个 对 象 ， 通 常情 况 下 ， 构 造 需 里 的 this 就 指向 返回 的 这 个 对 象 ， 见 如 下 代码 : 


var MyClass = function(){ 
this.name = 'sven'; 


3 


var obj = new MyClass(); 
alert ( obj.name ); // 输出 : sven 


但 用 new 调用 构造 器 时 , 还 要 注意 一 个 问题 , 如果 构 造 带 显 式 地 返回 了 一 个 object 类 型 的 对 
那么 此 次 运算 结果 最 终 会 返回 这 个 对 象 ， 而 不 是 我 们 之 前 期 待 的 this: 


var MyClass = function(){ 
this.name = 'sven'; 
return { // 显 式 地 返回 一 个 对 象 
name: “anne" 
} 


}; 


var obj = new MyClass(); 
alert ( obj.name ); // 输出 : anne 


如 果 构 造 右 不 显 式 地 返回 任何 数据 , 或 者 是 返回 一 个 非 对 象 类 型 的 数据 ， 就 不 会 造成 上 述 


问题 : 
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var MyClass = function(){ 
this.name = 'sven’ 
return ‘anne'; // 返回 string 类 型 


sy 


var obj = new MyClass(); 
alert ( obj.name ); // 输出 : sven 


4. Function.prototype.call 或 Function.prototype.apply 调用 


跟 普通 的 函数 调用 相 比 ,月 


改变 传人 函数 的 this: 


var obj1 = { 
name: 'sven', 
getName: function(){ 


return this.name; 


} 
}; 
var obj2 = { 
name: “anne' 
}; 


console.1og( obj1.getName() ); // 输出 : sven 
console.log( obj1.getName.call( obj2 ) ); // 输出 : anne 


call 和 apply 方法 能 很 好 地 体现 JavaScript 的 函数 式 语 言 特性 ,在 JavaScript 中 ， 几 乎 每 一 次 


用 到 了 cal 


1 和 apply。 在 下 一 节 会 详细 介绍 它们 。 


2.1.2 丢失 的 this 
这 是 一 个 经 常 遇 到 的 问题 ， 我 们 先 看 下 面 的 代码 : 


var obj = { 
myName: 'sven’', 
getName: function(){ 


} 
}; 


return this.myName; 


console.log( obj.getName() ); // 输出 : 'sven' 


var getName2 = obj.getName; 
console.1og( getName2() ); // 输出 : undefined 


当 调 月 


崩 obj .getName 时 ，getName 方法 是 作为 obj 对 象 的 属 怕 


被 调 月 


律 ， 此 时 的 this 指向 obj 对 象 ， 所 以 obj.getName() 输 出 'sven'。 
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肯 Function.prototype.call 或 Function.prototype.apply 可 以 动态 地 


编写 函数 式 语言 风格 的 代码 ， 都 离 不 开 call 和 apply。 在 JavaScript 诸 多 版 本 的 设计 模式 中 ,也 


目的, 根据 2.1.1 节 提 到 的 规 
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当 用 另外 一 个 变量 getName2 来 引用 obj.getName， 并 且 调 用 getName2 时 ,根据 2.1.2 节 提 到 的 
规律 ， 此 时 是 普通 函数 调用 方式 ，this 是 指向 全 局 window 的 ,所 以 程序 的 执行 结果 是 undefined。 

再 看 另 一 个 例子 ，document . Ete lenen ey 这 个 方法 名 实在 有 点 过 长 ， 我 们 大 概 尝试 过 用 一 
个 短 的 函数 来 代替 它 ， 如 同 prototype.js 等 一 些 框架 所 做 过 的 事情 : 


var getId = function( id ){ 
return document.getElementById( id ); 


getId( 'div1' ); 


我 们 也 许 思考 过 为 什么 不 能 用 下 面 这 种 更 简单 的 方式 : 


var getId = document.getElementById; 
getId( 'div1' ); 


现在 不 妨 花 1 分钟 时 间 ， 让 这 段 代 码 在 浏览 右 中 运行 一 次 : 


<html> 
<body> 
<div id="div1"> 我 是 一 个 div</div> 
</body> 
<script> 


var getId = document.getElementById; 
getId( 'div1' ); 


</script> 
</html> 


在 Chrome、Firefox、IE10 中 执行 过 后 就 会 发 现 ， 这 段 代码 抛 出 了 一 个 异常 。 这 是 因为 许多 
引擎 的 document.getElementById 方法 的 内 部 实现 中 需要 用 到 this。 这 个 this 本 来 被 期 望 指 向 
document ， 当 getElementById 方法 作为 document 对 象 的 属性 被 调用 时 ， 方法 内 部 的 this 确实 是 指 
向 document 的 。 


但 当 用 getId 来 引用 document.getElementById 之 后 ,再 调用 getId, 此 时 就 成 了 普通 函数 调用 ， 
函数 内 部 的 this 指向 了 window， 而 不 是 原来 的 document。 
我 们 可 以 尝试 利用 apply 把 document 当 作 this 传人 getId 函数 ， 帮 助 “ 修 正 ”this: 


document .getElementById = (function( func ){ 
return function(){ 
return func.apply( document, arguments ); 


})( document.getElementById ); 


var getId = document.getElementById; 
var div = getId( ‘div1' ); 


alert (div.id); // 输出 : div1 
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2.2 call 和 apply 


ECAMScript 3 给 Function 的 原型 定义 了 两 个 方法 ,它们 是 Function.prototype.call 和 Function. 
prototype.apply。 在 实际 开发 中 ， 特 别 是 在 一 些 函数 式 风 格 的 代码 编写 中 ，call 和 apply 方法 尤 
为 有 用 。 在 JavaScript 版 本 的 设计 模式 中 ， 这 两 个 方法 的 应 用 也 非常 广泛 ， 能 熟练 运用 这 两 个 方 
法 ， 是 我 们 真正 成 为 一 名 JavaScript 程序 员 的 重要 一 步 。 


2.2.1 call 和 apply 的 区 别 


Function.prototype.call 和 Function.prototype.apply 都 是 非常 常用 的 方法 。 它 们 的 作用 一 模 
一 样 ， 区 别 仅 在 于 传人 参数 形式 的 不 同 。 

apply 接受 两 个 参数 ， 第 一 个 参数 指定 了 函数 体内 this 对 象 的 指向 ， 第 二 个 参数 为 一 个 带 下 
标的 集合 ， 这 个 集合 可 以 为 数组 ， 也 可 以 为 类 数组 ，apply 方法 把 这 个 集合 中 的 元 素 作 为 参数 传 
递 给 被 调用 的 函数 : 


var func = function( a, b, c ){ 
alert ( [a, b,c ]); // 输出 [ 1，2，3 ] 


}; 

func.apply( null, [ 1, 2, 3 ] ); 

在 这 段 代码 中 ， 参 数 1、2、3 被 放 在 数组 中 一 起 传人 func 函数 ， 它 们 分 别 对 应 func 参数 列 
表 中 的 a、b、c。 

call 传人 的 参数 数量 不 固定 , 跟 apply 相同 的 是 , 第 一 个 参数 也 是 代表 函数 体内 的 this 指向 ， 
从 第 二 个 参数 开始 往 后 ， 每 个 参数 被 依次 传人 函数 : 


var func = function( a，b，c ){ 
alert ( [ab c]); // 输出 [ 1，2，3 ] 


func.call( null, 1, 2, 3 ); 

当 调 用 一 个 函数 时 ，JavaScript 的 解释 器 并 不 会 计较 形 参 和 实 参 在 数量 、 类 型 以 及 顺序 上 的 
区 别 ，JavaScript 的 参数 在 内 部 就 是 用 一 个 数组 来 表示 的 。 从 这 个 意义 上 说 ,apply 比 call 的 使 用 
率 更 高 ， 我 们 不 必 关 心 具体 有 和 多少 参 数 被 传人 函数 ， 只 要 用 apply 一 股 脑 地 推 过 去 就 可 以 了 。 

call 是 包装 在 apply 上 面 的 一 颗 语 法 糖 ， 如 果 我 们 明确 地 知道 函数 接受 多 少 个 参数 ， 而 且 想 
一 目 了 然 地 表达 形 参 和 实 参 的 对 应 关系 ， 那 么 也 可 以 用 call 来 传送 参数 。 

当 使 用 call 或 者 apply 的 时 候 ， 如 果 我 们 传人 的 第 一 个 参数 为 nul1， 函 数 体内 的 this 会 指 
向 默认 的 宿主 对 象 ， 在 浏览 器 中 则 是 window: 


var func = function( a，b，c ){ 
alert ( this === window ); // 输出 true 
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}; 
func.apply( null, [ 1, 2, 3 ] ); 
但 如 果 是 在 严格 模式 下 ， 函 数 体内 的 this 还 是 为 null: 
var func = function( a，b，c ){ 
"use strict"; 


alert ( this === null ); // 输出 true 
} 


func.apply( null, [ 1, 2, 3 ] ); 


有 时 候 我 们 使 用 call 或 者 apply 的 目的 不 在 于 指定 this 指向 ， 而 是 男 有 用 途 ， 比 如 借用 其 
他 对 象 的 方法 。 那 么 我 们 可 以 传人 nul1 来 代 奉 某 个 具体 的 对 象 : 


Math.max.apply( null, [ 1，2，5，3，4 ] ) // 输出 : 5 


2.2.2 cal1 和 apply 的 用 途 

前 面 说 过 , 能够 熟练 使 用 call 和 apply， 是 我 们 真正 成 为 一 名 JavaScript 程序 员 的 重要 一 步 ， 
本 节 我 们 将 详细 介绍 call 和 apply 在 实际 开发 中 的 用 途 。 

1. 改变 this 指向 

call 和 apply 最 常见 的 用 途 是 改变 孔 数 内 部 的 this 指向 ， 我 们 来 看 个 例子 : 


var obj1 = { 
name: 'sven' 

}; 

var obj2 = { 


name: 'anne' 


}; 
window.name = 'window'; 


var getName = function(){ 
alert ( this.name ); 


3 


getName(); // 输出 : window 
getName.call( obj1 ); // 输出 : sven 
getName.call( obj2 ); // 输出 : anne 


当 执 行 getName.call( obj1 ) 这 名 代码 时 ，getName 函数 体内 的 this 就 指向 obj1 对 象 ， 所 以 
此 处 的 
var getName = function(){ 


alert ( this.name ); 


}; 
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实际 上 相当 于 : 


var getName = function(){ 
alert ( obj1.name ); // 输出 : sven 


在 实际 开发 中 ， 经 常会 遇 到 this 指向 被 不 经 意 改 变 的 场景 ， 比 如 有 一 个 div 节点 ，div 节点 
的 onclick 事件 中 的 this 本 来 是 指向 这 个 div 的 : 


document.getElementById( 'div1' ).onclick = function(){ 
alert( this.id ); // 输出 : div1 


}; 
假如 该 事件 函数 中 有 一 个 内 部 函数 func, 在 事件 内 部 调用 func 函数 时 , func 函数 体内 的 this 
就 指向 了 window， 而 不 是 我 们 预期 的 div， 见 如 下 代码 : 


document .getElementById( 'div1' ).onclick = function(){ 


alert( this.id ); // 输出 : div1 
var func = function(){ 
alert ( this.id ); // 输出 : undefined 
} 
func(); 


这 时 候 我 们 用 call 来 修正 func 函数 内 的 this， 使 其 依然 指向 div: 


document .getElementById( 'div1' ).onclick = function(){ 
var func = function(){ 
alert ( this.id ); // 输出 : div1 


} 
func.call( this ); 
}; 


使 用 call 来 修正 this 的 场景 ,我 们 并 非 第 一 次 遇 到 ， 在 上 一 小 节 关 于 this 的 学 习 中 ， 我 们 
就 曾经 修正 过 document .getElementById 函数 内 部 “丢失 ”的 this， 代 码 如 下 : 


document .getElementById = (function( func ){ 
return function(){ 
return func.apply( document, arguments ); 


} 
})( document.getElementById ); 
Var getId = document.getElementById; 


var div = getId( 'div1” ); 
alert ( div.id ); // 输出 : div1 


2. Function.prototype.bind 
大 部 分 高 级 浏览 器 都 实现 了 内 置 的 Function.prototype.bind, 用 来 指定 函数 内 部 的 this 指向 ， 
即使 没有 原生 的 Function.prototype.bind 实现 ， 我 们 来 模拟 一 个 也 不 是 难事 ， 代 码 如 下 : 
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Function.prototype.bind = function( context ){ 
var self = this; // 保存 原 函 数 
return function(){ // 返回 一 个 新 的 函数 
return self.apply( context, arguments ); 


} 
}; 


var obj = { 
name: 'sven' 


}; 


var func = function(){ 
alert ( this.name ); 
}.bind( obj); 


// 输出 : sven 


func(); 


// 执行 新 的 函数 的 时 候 ， 会 把 之 前 传 入 的 context 
// 当 作 新 函数 体内 的 this 


我 们 通过 Function.prototype.bind 来 “包装 ”func 函数 ， 并 且 传人 一 个 对 象 context 当 作 参 


这 个 context 对 象 就 是 我 们 想 修 正 的 this 对 象 。 


在 Function.prototype.bind 的 内 部 实现 中 , 我 们 先 把 func 函数 的 引用 保存 起 来 , 然后 返回 一 
个 新 的 函数 。 当 我 们 在 将 来 执行 func 函数 时 ， 实 际 上 先 执行 的 是 这 个 刚刚 返回 的 新 函数 。 在 新 
函数 内 部 , self.apply( context, arguments ) 这 句 代 码 才 是 执行 原来 的 func 函数 , 并 且 指 定 context 


对 象 为 func 函数 体内 的 this。 


这 是 一 个 简化 版 的 Function.prototype.bind 实现 ， 通 常 我 们 还 会 把 它 实 现 得 稍 


使 得 可 以 往 func 函数 中 预先 填 人 一 些 参 数 : 


Function.prototype.bind = function(){ 
var self = this, // 保存 原 函 数 
context = [].shift.call( arguments )， 
args = [].slice.call( arguments ); 
return function(){ // 返回 一 个 新 的 函数 


ll 


aE 


二 
复杂 一 点 ， 


需要 绑 定 的 this 上 下 文 


// 剩余 的 参数 转 成 数组 


return self.apply( context, [].concat.call( args, [].slice.call( arguments ) ) ); 
// 执行 新 的 函数 的 时 候 ， 会 把 之 前 传 入 的 context 当 作 新 函数 体内 的 this 
// 并 且 组 合 两 次 分 别传 入 的 参数 ， 作 为 新 函数 的 参数 


} 
}; 


var obj = { 
name: 'sven' 


}; 


var func = function( a, b, c, d ){ 
alert ( this.name ); // 输出 : sven 
alert ( [a, b, c,d]) 
}.bind( obj, 1, 2 ); 


func( 3, 4 ); 
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3. 借用 其 他 对 象 的 方法 


我 们 知道 ,杜鹃 既 不 会 筑 巢 ， 也 不 会 用 锥 ,而 是 把 自己 的 蛋 寄托 给 云 瞧 等 其 他 鸟 类 ,让 它们 


代为 用 化 和 养育 。 同 样 ， 在 JavaScript 中 也 存在 类 似 的 借用 现象 。 


var A = function( name ){ 
this.name = name; 


}; 


var B = function(){ 
A.apply( this, arguments ); 


了 


B.prototype.getName = function(){ 
return this.name; 


号 


var b = new B( 'sven' ); 
console.log( b.getName() ); // 输出 : 'sven' 


借用 方法 的 第 二 种 运用 场景 跟 我 们 的 关系 更 加 密切 。 


借用 方法 的 第 一 种 场景 是 “借用 构造 函数 ”, 通过 这 种 技术 ,可 以 实现 一 些 类 似 继承 的 效果 : 


函数 的 参数 列表 arguments 是 一 个 类 数组 对 象 ， 虽 然 它 也 有 “下 标 ”， 但 它 并 非 真 正 的 数组 ， 
所 以 也 不 能 像 数 组 一 样 ， 进 行 排序 操作 或 者 往 集 合 里 添加 一 个 新 的 元 素 。 这 种 情况 下 , 我们 常常 
会 借用 Array.prototype 对 象 上 的 方法 。 比 如 想 往 arguments 中 添加 一 个 新 的 元 素 ， 通 常会 借用 


Array.prototype.push: 


(function(){ 
Array.prototype.push.call( arguments, 3 ); 
console.log ( arguments ); // 输出 [1,2,3] 
D( 1, 2 ); 


在 操作 arguments 的 时 候 ， 我 们 经 常 非常 频繁 地 找 Array.prototype 对 象 借用 方法 。 


想 把 arguments 转 成 真正 的 数组 的 时 候 ， 可 以 借用 Array.prototype.slice 方法 ; 想 截 去 


arguments 列表 中 的 头 一 个 元 素 时 ， 又 可 以 借用 Array.prototype.shift 方法 。 那 么 这 种 机 


剖 的 内 


部 实现 原理 是 什么 呢 ? 我 们 不 妨 翻 开 V8 的 引 警 源码， 以 Array.prototype.push 为 例 ,看 看 V8 引 


掌中 的 具体 实现 : 


function ArrayPush() { 
var n = TO_UINT32( this.length ); // 被 push 的 对 象 的 length 
var m = % ArgumentsLength(); // push 的 参数 个 数 
for (var i = 0; i < m; i++) { 
this[ +n ] =%Arguments( i ); // 复制 元 素 (1) 


} 
this.length = n+m; // 修正 length 属性 的 值 (2) 
return this.length; 

}; 
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通过 这 段 代码 可 以 看 到 ，Array.prototype.push 实际 上 是 一 个 属性 复制 的 过 程 ， 把 参数 按照 


下 标 依次 添加 到 被 push 的 对 象 上 面 ， 顺 便 修改 了 这 个 对 象 的 length 属性 。 至 于 被 修改 的 对 象 是 


谁 


LS 


到 底 是 数组 还 是 类 数组 对 象 ， 这 一 点 并 不 重要 。 
由 此 可 以 推断 ， 我 们 可 以 把 “任意 ”对 象 传 人 Array.prototype.push: 


var a = {}; 
Array.prototype.push.call( a, 'first' ); 


alert ( a.length ); // 输出 : 1 
alert (a[ 0 ] ); // first 


这 有 段 代码 在 绝 大 部 分 浏览 器 里 都 能 顺利 执行 , 但 由 于 引擎 的 内 部 实现 存在 差异 , 如果 在 低 版 


本 的 正 浏览 需 中 执行 ， 必 须 显 式 地 给 对 象 a 设置 length 属性 : 


var a = { 
length: 0 
}; 


前 面 我 们 之 所 以 把 “任意 ”两 字 加 了 双 引 号 ,是 因为 可 以 借用 Array.prototype.push 方法 的 对 


象 还 要 满足 以 下 两 个 条 件 ， 从 ArrayPush 函数 的 (1) 处 和 (2) 处 也 可 以 猜 到 ,这 个 对 象 至 少 还 要 满足 : 


口 对 象 本 身 要 可 以 存 取 属 性 ; 
口 对 象 的 length 属性 可 读 写 。 


对 于 第 一 个 条 件 ， 对 象 本 身 存 取 属 性 并 没有 问题 ， 但 如 果 借 用 Array.prototype.push 方法 的 


不 是 一 个 object 类 型 的 数据 ， 而 是 一 个 number 类 型 的 数据 呢 ? 我 们 无 法 在 number 身上 存 取 其 他 
数据 ， 那 么 从 下 面 的 测试 代码 可 以 发 现 ， 一 个 number 类 型 的 数据 不 可 能 借用 到 Array.prototype. 


push 方 法 : 
var a = 1; 
Array.prototype.push.call( a, 'first' ); 
alert ( a.length ); // 输出 : undefined 


alert ( a[ 0 ] ); // 输出 : undefined 


对 于 第 二 个 条 件 ， 函 数 的 length 属性 就 是 一 个 只 读 的 属性 ， 表 示 形 参 的 个 数 ， 我 们 尝试 把 


一 个 函数 当 作 this 传人 Array.prototype.push: 


var func = function(){}; 
Array.prototype.push.call( func, 'first' ); 


alert ( func.length ); 
// 报错 : cannot assign to read only property ‘length’ of function(){} 
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闭 包 和 高 阶 函 数 


虽然 JavaScript 是 一 门 完整 的 面向 对 象 的 编程 语言 ， 但 这 门 语言 同时 也 拥有 许多 函数 式 语言 
的 特性 。 

函数 式 语 言 的 具 祖 是 LISP，JavaScript 在 设计 之 初 参考 了 LISP 两 大 方言 之 一 的 Scheme， 引 | 
人 了 Lambda 表达 式 、 闭 包 、 高 阶 函 数 等 特性 。 使 用 这 些 特性 ， 我 们 经 常 可 以 用 一 些 灵 活 而 巧妙 
的 方式 来 编写 JavaScript 代码 。 

本 章 主要 挑选 了 闭 包 和 高 阶 函数 进行 讲解 。 在 JavaScript 版 本 的 设计 模式 中 ， 许 多 模式 都 可 
以 用 闭 包 和 高 阶 函 数 来 实现 。 


3.1 闭 包 


对 于 JavaScript 程序 员 来 说 ， 闭 包 (closure ) 是 一 个 难 懂 又 必须 征服 的 概念 。 闭 包 的 形成 与 
变量 的 作用 域 以 及 变量 的 生存 周期 密切 相关 。 下 面 我 们 先 简单 了 解 这 两 个 知识 点 。 


3.1.1 变量 的 作用 域 
变量 的 作用 域 ， 就 是 指 变 量 的 有 效 范围 。 我 们 最 常 谈 到 的 是 在 函数 中 声明 的 变量 作用 域 。 


当 在 函数 中 声明 一 个 变量 的 时 候 ， 如 果 该 变量 前 面 没有 带 上 关键 字 var， 这 个 变量 就 会 成 为 
全 局 变量 ， 这 当然 是 一 种 容易 造成 命名 冲突 的 做 法 。 

另外 一 种 情况 是 用 var 关键 字 在 函数 中 声明 变量 ， 这 时 候 的 变量 即 是 局 部 变量 ， 只 有 在 该 函 
数 内 部 才能 访问 到 这 个 变量 ， 在 函数 外 面 是 访问 不 到 的 。 代 码 如 下 : 


var func = function(){ 
var a = 1; 
alert ( a ); // 输出 : 1 
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func(); 

alert ( a ); // 输出 : Uncaught ReferenceError: a is not defined 

在 JavaScript 中 ， 消 数 可 以 用 来 创造 函数 作用 域 。 此 时 的 函数 像 一 层 半 透明 的 玻璃 ， 在 也 数 
里 面 可 以 看 到 外 面 的 变量 ,而 在 函数 外 面 则 无 法 看 到 函数 里 面 的 变量 。 这 是 因为 当 在 函数 中 搜索 
一 个 变量 的 时 候 , 如 果 该 函数 内 并 没有 声明 这 个 变量 , 那么 此 次 搜索 的 过 程 会 随 着 代码 执行 环境 
创建 的 作用 域 链 往外 层 逐 层 搜索 , 一 直 搜 索 到 全 局 对 象 为 止 。 变 量 的 搜索 是 从 内 到 外 而 非 从 外 到 
内 的 。 


下 面 这 有 段 包含 了 艇 套 函 数 的 代码 ， 也 许 能 帮助 我 们 加 座 对 变量 搜索 过 程 的 理解 : 


var a = 1; 


var func1 = function(){ 


var b = 2; 
var func2 = function(){ 
Var C = 3; 


alert ( b ); // 输出 : 2 
alert ( a ); // 输出 : 1 


} 
func2(); 
alert ( c ); // 输出 : Uncaught ReferenceError: c is not defined 
}; 
func1(); 
3.1.2 ”变量 的 生存 周期 


除了 变量 的 作用 域 之 外 ， 另 外 一 个 跟 闭 包 有 关 的 概念 是 变量 的 生存 周期 。 

对 于 全 局 变量 来 说 ， 全 局 变量 的 生存 周期 当然 是 永久 的 ， 除 非 我 们 主动 销毁 这 个 全 局 变量 。 

而 对 于 在 函数 内 用 var 关键 字 声 明 的 局 部 变量 来 说 ， 当 退出 函数 时 ,这 些 局 部 变量 即 失 去 了 
它们 的 价值 ， 它 们 都 会 随 着 函数 调用 的 结束 而 被 销毁 : 


var func = function(){ 


var a= 1; // 退出 函数 后 局 部 变量 a 将 被 销毁 
alert ( a ); 
func(); 


现在 来 看 看 下 面 这 段 代码 : 


var func = function(){ 
var a = 1; 
return function(){ 
a++j 
alert ( a ); 
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} 
}; 


var f = func(); 


f();  // 输出 : 
f();  // 输出 : 
f();  // 输出 : 
f();  // 输出 : 


mn 上 INP 


跟 我 们 之 前 的 推论 相反 ， 当 退出 函数 后 ,局 部 变量 a 并 没有 消失 ， 而 是 似乎 一 直 在 某 个 地 方 


存活 着 。 这 是 因为 当 执 行 var f= func(); 时 , f 返 回 了 一 个 匿名 函数 的 引用 ， 它 可 以 访问 到 func() 


被 调用 时 产生 的 环境 , 而 局 部 变量 a 一 直 处 在 这 个 环境 里 。 既 然 局 部 变量 所 在 的 环境 还 能 被 外 界 


访问 , 这 个 局 部 变量 就 有 了 不 被 销毁 的 理由 。 在 这 里 产生 了 一 个 闭 包 结构 ,局 部 变量 的 生命 看 起 


来 被 延续 了 。 
利用 闭 包 我 们 可 以 完成 许多 奇妙 的 工作 ,下面 介绍 一 个 闭 包 的 经 典 应 用 。 假设 页 面 上 有 5 个 
div 节点 ， 我 们 通过 循环 来 给 每 个 div 绑 定 onclick 事件 ， 按 照 索 引 顺 序 ， 点 击 第 1 个 div 时 弹出 
0， 点 击 第 2 个 div 时 弹出 1， 以 此 类 推 。 代 码 如 下 : 
<html> 
<body> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<script> 


var nodes = document.getElementsByTagName( 'div' ); 


for ( var i = 0, len = nodes.length; i < len; i++ ){ 
nodes[ i ].onclick = function(){ 
alert ( i ); 
} 


}; 
</script> 


</body> 
</htm]> 


测试 这 段 代码 就 会 发 现 ， 无 论点 击 哪 个 div， 最 后 弹出 的 结果 都 是 5。 这 是 因为 div 节点 的 


onclick 事件 是 被 异步 触发 的 ， 当 事件 被 触发 的 时 候 ，for 循环 早已 结束 ， 


此 时 变量 i 的 值 已 经 是 


5， 所 以 在 div 的 onclick 事件 函数 中 顺 着 作用 域 链 从 内 到 外 查找 变量 i 时 ， 查 找到 的 值 总 是 5。 


解决 方法 是 在 闭 包 的 帮助 下 , 把 每 次 循环 的 i 值 都 封闭 起 来 。 当 在 
中 从 内 到 外 查找 变量 i 时 , 会 和 完 找到 被 封闭 在 闭 包 环境 中 的 i, 如 果 有 5 
丰 0,1,2,3,4: 
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for ( var i = 0, len = nodes.length; i < len; i++ ){ 
(function( i ){ 
nodes[ i ].onclick = function(){ 
console.1log(i); 


} 
DD(i) 
根据 同样 的 道理 ， 我 们 还 可 以 编写 如 下 一 段 代 码 : 
var Type = {}; 
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){ 
(function( type ){ 


Type[ 'is' + type ] = function( obj ){ 
return Object.prototype.toString.call( obj ) === '[object '+ type +']'; 


} 
})( type ) 


了 


Type.isArray( [] ); // 输出 : true 
Type.isString( "str" ); // 输出 : true 


3. 


~ 


.3 闭 包 的 更 多 作用 


这 一 小 节 我 们 将 通过 几 个 例子 ,进一步 讲解 团 包 的 作用 。 因 为 篇 幅 所 限 ， 这 里 仅 例 举 少量 示 
例 。 在 实际 开发 中 ， 闭 包 的 运用 非常 广泛 。 


1. 封装 变量 


闭 包 可 以 帮助 把 一 些 不 需要 暴露 在 全 局 的 变量 封装 成 “私有 变量 "”。 假 设 有 一 个 计算 乘积 的 
简单 函数 : 


var mult = function(){ 
var a = 1; 
for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 
a = a* arguments[i]; 
} 


return a; 


局 


mult 函数 接受 一 些 number 类 型 的 参数 , 并 返回 这 些 参数 的 乘积 。 
的 参数 来 说 ， 每 次 都 进行 计算 是 一 种 浪费 ， 我 们 可 以 加 入 缓存 机 制 来 提高 这 个 函数 的 性 能 


var cache = {}; 


var mult = function(){ 
var args = Array.prototype.join.call( arguments, ','" ); 
if ( cache[ args ] ){ 
return cache[ args ]; 


} 
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var a = 1; 
for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 
a = a * arguments[i]; 


} 


return cache[ args ] = a; 


}; 


alert ( mult( 1,2,3 ) ); // 输出 : 6 
alert ( mult( 1,2,3 ) ); // 输出 : 6 


我 们 看 到 cache 这 个 变量 仅仅 在 mult 函数 中 被 使 用 , 与 其 让 cache 变量 跟 mult 函数 一 起 平行 
地 暴露 在 全 局 作用 域 下 ， 不 如 把 它 封 闭 在 mult 函数 内 部 ， 这 样 可 以 减少 页 面 中 的 全 局 变量 ， 以 
避免 这 个 变量 在 其 他 地 方 被 不 小 心 修 改 而 引发 错误 。 代 码 如 下 : 


var mult = (function(){ 
var cache = {}; 
return function(){ 
var args = Array.prototype.join.call( arguments, ','" ); 
if ( args in cache ){ 
return cache[ args ]; 
} 


var a = 1; 
for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 
a = a* arguments[i]; 


return cache[ args ] = a; 
} 
])(); 


提炼 函数 是 代码 重 构 中 的 一 种 常见 技巧 。 如 果 在 一 个 大 函数 中 有 一 些 代码 块 能 够 独立 出 来 ， 
我 们 常常 把 这 些 代 码 块 封装 在 独立 的 小 函数 里 面 。 独 立 出 来 的 小 函数 有 助 于 代码 复 用 , 如 果 这 些 
小 函数 有 一 个 良好 的 命名 , 它们 本 身 也 起 到 了 注释 的 作用 。 如 果 这 些小 函数 不 需要 在 程序 的 其 他 
地 方 使 用 ， 最 好 是 把 它们 用 闭 包 封闭 起 来 。 代 码 如 下 : 


var mult = (function(){ 
var cache = {}; 
var calculate = function(){  // 封闭 calculate 函数 
var a = 1; 
for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 
a = a* arguments[i]; 
} 


return a; 


}; 


return function(){ 
var args = Array.prototype.join.call( arguments, ','" ); 
if ( args in cache ){ 
return cache[ args ]; 
} 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


40 第 3 章 闭 包 和 高 阶 函 数 


return cache[ args ] = calculate.apply( null, arguments ); 
po 
2. 延续 局 部 变量 的 寿命 
img 对 象 经 常用 于 进行 数据 上 报 ， 如 下 所 示 : 
var report = function( src ){ 
var img = new Image(); 


img.src = src; 


二 


report( 'http://xxx.com/getUserInfo' ); 


但 是 通过 查询 后 台 的 记录 我 们 得 知 ， 因 为 一 些 低 版 本 浏览 器 的 实现 存在 bug， 在 这 些 浏览 
下 使 用 report 函数 进行 数据 上 报 会 丢失 30% 左 右 的 数据 ， 也 就 是 说 ，report 函数 并 不 是 每 一 次 
都 成 功 发 起 了 HTTP 请 求 。 丢失 数据 的 原因 是 img 是 report 函数 中 的 局 部 变量 , 当 report 函数 的 
调用 结束 后 ，img 局 部 变量 随即 被 销毁 ， 而 此 时 或 许 还 没 来 得 及 发 出 HTTP 请 求 ， 所 以 此 次 请 求 
就 会 于 失掉。 

现在 我 们 把 img 变量 用 闭 包 封闭 起 来 ， 便 能 解决 请 求 丢失 的 问题 : 

var report = (function(){ 

var imgs = []; 

return function( src ){ 
var img = new Image(); 
imgs.push( img ); 
img.src = src; 


} 
}) 0; 


3.1.4” 闭 包 和 面向 对 象 设计 


过 程 与 数据 的 结合 是 形容 面向 对 象 中 的 “对 象 ”时 经 常 使 用 的 表达 。 对 象 以 方法 的 形式 包含 
了 过 程 ， 而 闭 包 则 是 在 过 程 中 以 环境 的 形式 包含 了 数据 。 通 常用 面向 对 象 思想 能 实现 的 功能 ， 
闭 包 也 能 实现 。 反 之 亦 然 。 在 JavaScript 语言 的 祖先 Scheme 语言 中 ， 甚 至 都 没有 提供 面向 对 象 
的 原生 设计 ， 但 可 以 使 用 闭 包 来 实现 一 个 完整 的 面向 对 象 系统 。 


下 面 来 看 看 这 段 跟 闭 包 相关 的 代码 : 


var extent = function(){ 
var value = 0; 
return { 
call: function(){ 
Value++; 
console.log( value ); 


} 
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} 
}; 


var extent = extent(); 


extent.call(); // 输出 : 1 
extent.call(); // 输出 : 2 
extent.call(); // 输出 : 3 


如 果 换 成 面向 对 象 的 写法 ， 就 是 : 


var extent = { 
value: 0， 
call: function(){ 
this.value++; 
console.log( this.value ); 


} 


extent.call(); // 输出 : 1 
extent.call(); // 输出 : 2 
extent.call(); // 输出 : 3 


或 者 : 


var Extent = function(){ 
this.value = 0; 


}; 


Extent.prototype.call = function(){ 
this.Vvalue++; 
console.log( this.value ); 


}; 
var extent = new Extent(); 


extent.call(); 
extent.call(); 
extent.call(); 


3.1.5 用 闭 包 实现 命令 模式 


在 JavaScript 版 本 的 各 种 设计 模式 实现 中 ， 闭 包 的 运用 非常 广泛 ， 在 后 续 的 学 习 过 程 中 ,我 
们 将 体会 到 这 一 点 。 

在 完成 团 包 实现 的 命令 模式 之 前 , 我 们 先 用 面向 对 象 的 方式 来 编写 一 段 命令 模式 的 代码 。 虽 

还 没有 进入 设计 模式 的 学 习 , 但 这 个 作为 演示 作用 的 命令 模式 结构 非常 简单 , 不 会 对 我 们 的 理 
ww 代码 如 下 : 


<html> 
<body> 
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<button id="execute"> 点 击 我 执行 命令 </button> 
<button id="undo"> 点 击 我 执行 命令 </button> 
<script> 


var Tv={ 
open: function(){ 
console.1log(“' 打 开 电 视 机 ' ); 
}), 
close: function(){ 
console.log( ' 关 上 电视 机 ' ); 
} 


}; 


var OpenTvCommand 
this.receiver 


}; 


function( receiver ){ 
receiver; 


ll ll 


OpenTvCommand.prototype.execute = function(){ 
this.receiver.open(); // 执行 命令 ， 打 开 电 视 机 


}; 


OpenTvCommand.prototype.undo = function(){ 
this.receiver.close(); // 撤销 命令 ,关闭 电视 机 
}; 


var setCommand = function( command ){ 
document .getElementById( 'execute' ).onclick = function(){ 
command .execute(); // 输出 : 打开 电视 机 


document .getElementById( “undo”).onclick = function(){ 
command.undo(); // 输出 : 关闭 电视 机 
} 


}; 
setCommand( new OpenTvCommand( Tv ) ); 


</script> 
</body> 
</html> 


命令 模式 的 意图 是 把 请 求 封装 为 对 象 , 从 而 分 离 请 求 的 发 起 者 和 请 求 的 接收 者 ( 执行 者 ) 之 
间 的 耦合 关系 。 在 命令 被 执行 之 前 ， 可 以 预先 往 命 令 对 象 中 植 人 命令 的 接收 者 。 

但 在 JavaScript 中 ， 子 数 作为 一 等 对 象 ， 本 身 就 可 以 四 处 传递 ， 用 函数 对 象 而 不 是 普通 对 象 
来 封装 请 求 显得 更 加 简单 和 自然 。 如 果 需 要 往 函 数 对 象 中 预先 植 入 命令 的 接收 者 , 那么 闭 包 可 以 
完成 这 个 工作 。 在 面向 对 象 版 本 的 命令 模式 中 , 预先 植 人 的 命令 接收 者 被 当成 对 象 的 属性 保存 起 
来 ; 而 在 闭 包 版 本 的 命令 模式 中 ,命令 接收 者 会 被 封闭 在 闭 包 形成 的 环境 中 ， 代 码 如 下 : 

var Tv={ 


open: function(){ 
console.log(“' 打 开 电 视 机 ' ); 


外 
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close: function(){ 
console.1og(“ 关 上 电视 机 ”) ; 
} 


}; 
var createCommand = function( receiver ){ 


var execute = function(){ 


return receiver.open(); // 执行 命令 ， 打 开 电 视 机 


} 


var undo = function(){ 


return receiver.close(); // 执行 命令 ,关闭 电视 机 


return { 
execute: execute, 
undo: undo 


be 


var setCommand = function( command ){ 


document .getElementById( 'execute' ).onclick = function(){ 


command.execute(); // 输出 : 打开 电视 机 


} 


document .getElementById( 'undo' ).onclick = function(){ 


command.undo(); // 输出 : 关闭 电视 机 
}; 


setCommand( createCommand( Tv ) ); 


3.1.6 ” 闭 包 与 内 存 管理 


闭 包 是 一 个 非常 强大 的 特性 , 但 人 们 对 其 也 有 诸多 误解 。 一 种 答 人 听闻 的 说 法 是 闭 包 会 造成 


内 存 泄露 ， 所 以 要 尽量 减少 闭 包 的 使 用 。 


局 部 变量 本 来 应 该 在 函数 退出 的 时 候 被 解除 引用 , 但 如 果 局 部 变量 被 封闭 在 闭 包 形成 的 环境 
中 , 那么 这 个 局 部 变量 就 能 一 直 生 存 下 去 。 从 这 个 意义 上 看 , 闭 包 的 确 会 使 一 些 数据 无 法 被 及 时 


销毁 。 使 用 闭 包 的 一 部 分 原因 是 我 们 选择 主动 把 一 些 变量 封闭 在 闭 包 中 , 因为 可 能 在 以 后 还 需要 
使 用 这 些 变 量 , 把 这 些 变 量 放 在 闭 包 中 和 放 在 全 局 作用 域 , 对 内 存 方面 的 影响 是 一 致 的 , 这 里 并 


不 能 说 成 是 内 存 泄 露 。 如 果 在 将 来 需要 回收 这 些 变量 ， 我 们 可 以 手动 把 这 些 变 量 设 为 null。 


跟 闭 包 和 内 存 泄 露 有 关系 的 地 方 是 , 使 用 闭 包 的 
用 域 链 中 保存 着 一 些 DOM 节点 ， 这 时 候 就 有 可 能 造 
并 非 JavaScript 的 问题 。 在 正 浏 览 器 中 ， 由 于 BOM 


同时 比较 容易 形成 循环 引用 ,如 果 闭 包 的 作 
成 内 存 泄露 。 但 这 本 身 并 非 闭 包 的 问题 ,也 
和 DOM 中 的 对 象 是 使 用 C++ 以 COM 对 象 


的 方式 实现 的 ， 而 COM 对 象 的 垃圾 收集 机 制 采用 的 是 引用 计数 策略 。 在 基于 引用 计数 策略 的 垃 
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圾 回收 机 制 中 ， 如果 两 个 对 象 之 间 形 成 了 循环 引用 ,那么 这 两 个 对 象 都 无 法 被 回收 , 但 循环 引用 
造成 的 内 存 汇 露 在 本 质 上 也 不 是 闭 包 造成 的 。 

同样 , 如 果 要 解决 循环 引用 带 来 的 内 存 汇 露 问题 , 我 们 只 需要 把 循环 引用 中 的 变量 设 为 null 
即 可 。 将 变量 设置 为 null 意味 着 切断 变量 与 它 此 前 引用 的 值 之 间 的 连接 。 当 垃圾 收集 器 下 次 运 
行 时 ， 就 会 删除 这 些 值 并 回收 它们 占用 的 内 存 。 


3.2 ”高 阶 函 数 

高 阶 函数 是 指 至 少 满足 下 列 条 件 之 一 的 函数 。 
口 函数 可 以 作为 参数 被 传递 ; 
口 函数 可 以 作为 返回 值 输出 。 

JavaScript 语言 中 的 函数 显然 满足 高 阶 函 数 的 条 件 ， 在 实际 开发 中 ， 无 论 是 将 函数 当 作 参数 
传递 , 还 是 让 函数 的 执行 结果 返回 男 外 一 个 函数 ,这 两 种 情形 都 有 很 多 应 用 场景 ,下面 就 列举 一 
些 高 阶 函数 的 应 用 场景 。 


3.2.1 函数 作为 参数 传递 


把 函数 当 作 参 数 传递 , 这 代表 我 们 可 以 抽 离 出 一 部 分 容易 变化 的 业务 逻辑 , 把 这 部 分 业务 轩 
辑 放 在 函数 参数 中 , 这 样 一 来 可 以 分 离 业务 代码 中 变化 与 不 变 的 部 分 。 其 中 一 个 重要 应 用 场景 就 
是 稼 见 的 回调 函数 。 

1. 回调 函数 

在 ajax 异步 请 求 的 应 用 中 ， 回 调 函 数 的 使 用 非常 频繁 。 当 我 们 想 在 ajax 请 求 返 回 之 后 做 一 
些 事情 , 但 又 并 不 知道 请 求 返回 的 确切 时 间 时 , 最 常见 的 方案 就 是 把 callback 函数 当 作 参数 传人 
发 起 ajax 请 求 的 方法 中 ， 待 请 求 完成 之 后 执行 callback 函数 : 

var getUserInfo = function( userId, callback ){ 

$.ajax( 'http://xxx.com/getUserInfo?' + userId, function( data ){ 


if ( typeof callback === 'function' ){ 
callback( data ); 


}); 
} 


getUserInfo( 13157, function( data ){ 
alert ( data.userName ); 


}); 


回调 函数 的 应 用 不 仅 只 在 异步 请 求 中 ， 当 一 个 函数 不 适合 执行 一 些 请 求 时 , 我 们 也 可 以 把 这 
些 请 求 封装 成 一 个 函数 , 并 把 它 作为 参数 传递 给 另外 一 个 函数 ,“ 委 托 ” 给 另外 一 个 函数 来 执行 。 
比如 ， 我 们 想 在 页 面 中 创建 100 个 div 节点 ， 然 后 把 这 些 div 节点 都 设置 为 隐藏 。 下 面 是 一 
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种 编写 代码 的 方式 : 


var appendDiv = function(){ 
for ( var i = 0; i < 100; i+t+ ){ 
var div = document.createElement( 'div' ); 
div.innerHTML = i; 
document.body.appendChild( div ); 
div.style.display = 'none'; 


} 
}; 


appendDiv(); 


把 div.style.display = 'none' 的 逻辑 人 硬 编码 在 appendDiv 里 显然 是 不 合理 的 ，appendDiv 未 免 
有 点 个 性 化 ,成 为 了 一 个 难以 复 用 的 函数 ,并 不 是 每 个 人 创建 了 节点 之 后 就 希望 它们 立刻 被 隐藏 。 

于 是 我 们 把 div.style.display ='none' 这 行 代 码 抽出 来 ， 用 回调 函数 的 形式 传人 appendDiv 
方法 : 


var appendDiv = function( callback ){ 
for ( var i = 0; i < 100; i+t+ ){ 
var div = document.createElement( 'div' ); 
div.innerHTML = i; 
document.body.appendChild( div ); 
if ( typeof callback === 'function' ){ 
callback( div ); 
} 


} 
}; 


appendDiv(function( node ){ 

node.style.display = 'none'; 

]); 

可 以 看 到 ,隐藏 节点 的 请 求实 际 上 是 由 客户 发 起 的 , 但 是 客户 并 不 知道 节点 什么 时 候 会 创 
建 好 ， 于 是 把 隐藏 节点 的 逻辑 放 在 回调 函数 中 ,“ 委 托 ” 给 appendDiv 方法 。appendDiv 方法 当 
然 知道 节点 什么 时 候 创建 好 ， 所 以 在 节点 创建 好 的 时 候 ，appendDiv 会 执行 之 前 客户 传 入 的 回 

2. Array.prototype.sort 


Array.prototype.sort 接受 一 个 函数 当 作 参数 , 这 个 函数 里 面 封装 了 数组 元 素 的 排序 规则 。 从 
Array.prototype.sort 的 使 用 可 以 看 到 ， 我 们 的 目的 是 对 数组 进行 排序 ， 这 是 不 变 的 部 分 ; 而 使 
用 什么 规则 去 排序 ， 则 是 可 变 的 部 分 。 把 可 变 的 部 分 封装 在 函数 参数 里 ， 动 态 传人 
Array.prototype.sort， 使 Array.prototype.sort 方法 成 为 了 一 个 非常 灵活 的 方法 ， 代 码 如 下 : 


// 从 小 到 大 排列 


[ 1, 4, 3 ].sort( function( a, b ){ 
return a - b; 
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]); 


// 输出 : [ 1，3，4 ] 


// 从 大 到 小 排列 


[ 1，4，3 ].sort( function( a, b ){ 
return b - a; 


DS 


// 输出 : [ 4, 3, 1 ] 


3.2.2 ”函数 作为 返回 值 输出 


相 比 把 函数 当 作 参数 传递 ,函数 当 作 返 回 值 输出 的 应 用 场景 也 许 更 多 , 也 更 能 体现 函数 式 编 
程 的 巧妙 。 计 函数 继续 返回 一 个 可 执行 的 函数 ， 意 味 着 运算 过 程 是 可 延续 的 。 

1. 判断 数据 的 类 型 

我 们 来 看 看 这 个 例子 ,判断 一 个 数据 是 否 是 数组 ,在 以 往 的 实现 中 ,可 以 基于 鸭子 类 型 的 概 
念 来 判断 ， 比 如 判断 这 个 数据 有 没有 length 属性 ， 有 没有 sort 方法 或 者 slice 方法 等 。 但 更 好 
的 方式 是 用 0bject.prototype.toString 来 计算 。0bject.prototype.toString.call( obj ) 返 回 一 个 
字符 串 ， 比 如 object.prototype.toString.call( [1,2,3] ) 总 是 返回 "[object Array]"， 而 
0bject.prototype.toString.call(“str”) 总 是 返回 "[object String]"。 所 以 我 们 可 以 编写 一 系列 的 
isType 也 数 。 代 码 如 下 : 


var isString = function( obj ){ 
return Object.prototype.toString.call( obj ) === '[object String]'; 


局 


var isArray = function( obj ){ 
return Object.prototype.toString.call( obj ) === '[object Array]'; 
}; 


var isNumber = function( obj ){ 

; return Object.prototype.toString.call( obj ) === '[object Number]'; 

我 们 发 现 ， 这 些 函 数 的 大 部 分 实现 都 是 相同 的 ， 不 同 的 只 是 0bject.prototype.toString. 
call( obj ) 返 回 的 字符 串 。 为 了 避免 多 余 的 代码 ,我 们 尝试 把 这 些 字符 串 作 为 参数 提前 值 人 isType 
函数 。 代 码 如 下 : 

var isType = function( type ){ 


return function( obj ){ 
return Object.prototype.toString.call( obj ) === '[object '+ type +']'; 
} 
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里 暂 


var isString = isType( 'String' ); 
var isArray = isType( 'Array' ); 
var isNumber = isType( 'Number' ); 


console.log( isArray( [ 1, 2, 3 ] ) ); // 输出 : true 

我 们 还 可 以 用 循环 语句 ， 来 批量 注册 这 些 isType 函数 : 

var Type = {}; 

for ( var i = 0, type; type = [ 'String', 'Array', 'Number’ ][ i++ ]; ){ 
(function( type ){ 


Type[ 'is' + type ] = function( obj ){ 
return Object.prototype.toString.call( obj ) === '[object '+ type +']'; 


} 
})( type ) 


了 


Type.isArray( [] ); // 输出 : true 
Type.isString( "str" ); // 输出 : true 


2. getSingle 


下 面 是 一 个 单 例 模 式 的 例子 ,在 第 三 部 分 设计 模式 的 学 习 中 , 我 们 将 进行 更 深入 的 讲解 ,这 


旦 只 了 解 其 代码 实现 : 


可 以 


var getSingle = function ( fn ) { 
Var ret; 
return function () { 
return ret || ( ret = fn.apply( this, arguments ) ); 
}; 
}; 


这 个 高 阶 函数 的 例子 , 既 把 函数 当 作 参数 传递 ,又 让 函数 执行 后 返回 了 另外 一 个 函数 。 我 们 


看 看 getSingle 函数 的 效果 ; 


var getScript = getSingle(function(){ 
return document.createElement( 'script' ); 


]); 
var script1 = getScript(); 
var script2 = getScript(); 


alert ( script1 === script2 ); // 输出 : true 


3.2.3 ”高 阶 函数 实现 AOP 
AOP (面向 切面 编程 ) 的 主要 作用 是 把 一 些 跟 核心 业务 逻辑 模块 无 关 的 功能 抽 离 出 来 , 这些 


跟 业务 逻辑 无 关 的 功能 通常 包括 日 志 统计 、 安 全 控制 、 异 常 处 到 
再 通过 “动态 织 和 人 ”的 方式 掺 入 业务 逻辑 模块 中 。 这 样 做 的 好 处 首先 是 可 以 保持 业务 逻辑 模块 的 
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等 。 把 这 些 功 能 抽 离 出 来 之 后 ， 
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纯净 和 高 内 聚 性 ， 其 次 是 可 以 很 方便 地 复 用 日 志 统 计 等 功能 模块 。 
在 Java 语言 中 ， 可 以 通过 反射 和 动态 代理 机 制 来 实现 AOP 技术 。 而 在 JavaScript 这 种 动态 
语言 中 ，AOP 的 实现 更 加 人 简单， 这 是 JavaScript 与 生 俱 来 的 能 
通常 ， 在 JavaScript 中 实现 AOP， 都 是 指 把 一 个 函数 “动态 织 入 ”到 男 外 一 个 函数 之 中 ,， 具 
体 的 实现 技术 有 很 多 ， 本 节 我 们 通过 扩展 Function.prototype 来 做 到 这 一 点 。 代 码 如 下 : 
Function.prototype.before = function( beforefn ){ 
var _ self = this; ”// 保存 原 函 数 的 引用 
return function(){ // 返回 包含 了 原 济 数 和 新 函数 的 "代理 "函数 


beforefn.apply( this, arguments ); // 执行 新 函数 ， 修 正 this 
return _ self.apply( this, arguments ); // 执行 原 函 数 


} 
所 


Function.prototype.after = function( afterfn ){ 
var _ self = this; 
return function(){ 
var ret = _ self.apply( this, arguments ); 
afterfn.apply( this, arguments ); 
return ret; 
} 
}; 


var func = function(){ 
console.log( 2 ); 

func = func.before(function(){ 
console.log( 1 ); 

}).after(function(){ 


console.log( 3 ); 
}); 


func(); 


我 们 把 负责 打印 数字 1 和 打印 数字 3 的 两 个 函数 通过 AOP 的 方式 动态 植 人 func 函数 。 通 过 
执行 上 面 的 代码 ， 我 们 看 到 控制 台 顺 利 地 返回 了 执行 结果 1、2、3。 


Q Elements Network Sources Timeline Profiles Resources Audits | Consol 
© 守 <topframe> 
1 


图 3-1 


这 种 使 用 AOP 的 方式 来 给 函数 添加 职责 , 也 是 JavaScript 语言 中 一 种 非常 特别 和 巧妙 的 装饰 
者 模式 实现 。 这 种 装饰 者 模式 在 实际 开发 中 非常 有 用 ， 我 们 将 在 第 15 章 进 行 详细 的 讲解 。 有 兴 
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趣 的 读者 可 以 提前 翻阅 第 15 章 进 行 了 解 。 
3.2.4 ”高 阶 函数 的 其 他 应 用 
前 面 我 们 已 经 学 习 过 高 阶 函 数 ， 本 广 我 们 再 挑选 一 些 常 见 的 高 阶 函数 应 用 进行 介绍 。 


1. currying 

首先 我 们 讨论 的 是 函数 柯 里 化 ( function currying )。currying 的 概念 最 早 由 俄国 数学 家 Moses 
Sch5nfinkel 发 明 , 而 后 由 著名 的 数理 逻辑 学 家 Haskell Curry 将 其 丰富 和 发 展 , currying 由 此 得 名 。 

currying 又 称 部 分 求 值 。 一 个 currying 的 函数 首先 会 接受 一 些 参数 ， 接 受 了 这 些 参数 之 后 ， 
该 函数 并 不 会 立即 求 值 , 而 是 继续 返回 另外 一 个 函数 , 刚才 传人 的 参数 在 函数 形成 的 闭 包 中 被 保 
存 起 来 。 待 到 函数 被 真正 需要 求 值 的 时 候 ， 之 前 传人 的 所 有 参数 都 会 被 一 次 性 用 于 求 值 。 

从 字面 上 理解 currying 并 不 太 容 易 ， 我 们 来 看 下 面 的 例子 。 

假设 我 们 要 编写 一 个 计算 每 月 开销 的 函数 。 在 每 天 结束 之 前 , 我 们 都 要 记录 今天 花 掉 了 多 少 
钱 。 代 码 如 下 : 


var monthlyCost = 0; 


var cost = function( money ){ 
monthlyCost += money; 


}; 


cost( 100 ); // 第 1 天 开销 
cost( 200 ); // 第 2 天 开销 
cost( 300 ); // 第 3 天 开销 
//cost( 700 ); // 第 30 天 开销 


alert ( monthlyCost ); // 输出 : 600 


通过 这 段 代 码 可 以 看 到 , 每 天 结束 后 我 们 都 会 记录 并 计算 到 今天 为 止 花 掉 的 钱 。 但 我 们 其 实 
并 不 太 关 心 每 天 花 掉 了 多 少 钱 ， 而 只 想 知道 到 月 底 的 时 候 会 花 掉 多 少 钱 。 也 就 是 说 ,实际 上 只 需 
要 在 月 底 计 算 一 次 。 

如 果 在 每 个 月 的 前 29 天 , 我 们 都 只 是 保存 好 当天 的 开销 ， 直 到 第 30 天 才 进 行 求 值 计算 ， 这 
样 就 达到 了 我 们 的 要 求 。 虽 然 下 面 的 cost 函数 还 不 是 一 个 currying 函数 的 完整 实现 ， 但 有 助 于 
我 们 了 解 其 思想 : 


var cost = (function(){ 
var args = []; 


return function(){ 
if ( arguments.length === 0 ){ 
var money = 0; 
for ( var i = 0, 1 = args.length; i < 1; it+ ){ 
money += args[ i ]; 
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} 
return money; 
}else{ 
[].push.apply( args, arguments ); 
} 
])(); 


cost( 100 ); // 未 真正 求 值 
cost( 200 ); ”// 未 真正 求 值 
cost( 300 ); ”// 未 真正 求 值 


console.log( cost() ); // 求 值 并 输出 : 600 

接 下 来 我 们 编写 一 个 通用 的 function currying(){}，function currying(){} 接 受 一 个 参数 ， 即 
将 要 被 currying 的 函数 。 在 这 个 例子 里 ,这 个 函数 的 作用 遍历 本 月 每 天 的 开销 并 求 出 它们 的 总 和 。 
代码 如 下 : 


var currying 
Var args 


function( fn ){ 
[]; 


return function(){ 
if ( arguments.length === 0 ){ 
return fn.apply( this, args ); 
}else{ 
[].push.apply( args, arguments ); 
return arguments.callee; 


} 


}; 


var cost = (function(){ 
var money = 0; 


return function(){ 
for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 


money += arguments[ i ]; 


return money; 


} 
0; 
var cost = currying( cost ); // 转化 成 cuUrrying 函数 
cost( 100 ); ”// 未 真正 求 值 
cost( 200 ); // 未 真正 求 值 
cost( 300 ); // 未 真正 求 值 


alert ( cost() ); // 求 值 并 输出 : 600 
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至 此 , 我 们 完成 了 一 个 currying 函数 的 编写 。 当 调用 cost() 时 , 如 果 明 确 地 带 上 了 一 些 参数 ， 
表示 此 时 并 不 进行 真正 的 求 值 计算 ， 而 是 把 这 些 参数 保存 起 来 ， 此 时 让 cost 函数 返回 另外 一 个 
函数 。 只 有 当 我 们 以 不 带 参 数 的 形式 执行 cost() 时 ， 才 利用 前 面 保存 的 所 有 参数 ,真正 开始 进行 
求 值 计算 。 

2. uncurrying 

在 JavaScript 中 ， 当 我 们 调用 对 象 的 某 个 方法 时 ， 其 实 不 用 去 关心 该 对 象 原本 是 否 被 设计 为 
拥有 这 个 方法 ， 这 是 动态 类 型 语言 的 特点 ， 也 是 常 说 的 鸭子 类 型 思想 。 

同 理 , 一 个 对 象 也 未 必 只 能 使 用 它 自身 的 方法 , 那么 有 什么 办 法 可 以 让 对 象 去 借用 一 个 原本 
不 属于 它 的 方法 呢 ? 

答案 对 于 我 们 来 说 很 简单 ，call 和 apply 都 可 以 完成 这 个 需求 : 


var obj1 = { 
name: “SVven' 


/ 


}; 


var obj2 = { 
getName: function(){ 
return this.name; 
} 
}; 


console.log( obj2.getName.call( obj1 ) ); // 输出 : sven 


我 们 常常 让 类 数组 对 象 去 借用 Array.prototype 的 方法 ， 这 是 call 和 apply 最 常见 的 应 用 场 
景 之 一 : 


(function(){ 
Array.prototype.push.call( arguments, 4 ); // arguments 借用 Array.prototype.push 方法 
console.log( arguments ); // 输出 : [1，2，3，4] 


]) 1，2，3 ); 


在 我 们 的 预期 中 , Array.prototype 上 的 方法 原本 只 能 用 来 操作 array 对 象 ,但 用 call 和 apply 
可 以 把 任意 对 象 当 作 this 传人 某 个 方法 ， 这 样 一 来 ,方法 中 用 到 this 的 地 方 就 不 再 局 限于 原来 
规定 的 对 象 ， 而 是 加 以 泛 化 并 得 到 更 广 的 适用 性 。 

Array.prototype 上 的 方法 可 以 操作 任何 对 象 的 原理 可 参阅 2.2 节 。 

那么 有 没有 办 法 把 泛 化 this 的 过 程 提取 出 来 呢 ? 本 小 节 讲 述 的 uncurrying 就 是 用 来 解决 这 
个 问题 的 。uncurrying 的 话题 来 自 JavaScript 之 父 Brendan Eich 在 2011 年 发 表 的 一 篇 Twitter。 以 
下 代码 是 uncurrying 的 实现 方式 之 一 : 

Function.prototype.uncurrying = function () { 

var self = this; 


return function() { 
var obj = Array.prototype.shift.call( arguments ); 
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return self.apply( obj, arguments ); 

}; 

在 讲解 这 段 代 码 的 实现 原理 之 前 ， 我 们 先 来 瞧 瞧 它 有 什么 作用 。 

在 类 数组 对 象 arguments 借用 Array.prototype 的 方法 之 前 ， 先 把 Array.prototype.push.call 
这 句 代码 转换 为 一 个 通用 的 push 函数 : 


var push = Array.prototype.push.uncurrying(); 


(function(){ 
push( arguments, 4 ); 
console.log( arguments ); // 输出 : [1，2，3，4] 
D(1, 2,3); 
通过 uncurrying 的 方式 , Array.prototype.push.call 变 成 了 一 个 通用 的 push 函数 。 这 样 一 来 ， 
push 函数 的 作用 就 跟 Array.prototype.push 一 样 了 ， 同 样 不 仅仅 局 限于 只 能 操作 array 对 象 。 而 
对 于 使 用 者 而 言 ， 调 用 push 函数 的 方式 也 显得 更 加 简洁 和 意图 明了 。 
我 们 还 可 以 一 次 性 地 把 Array.prototype 上 的 方法 “复制 ”到 array 对 象 上 ， 同 样 这 些 方法 可 
操作 的 对 象 也 不 仅仅 只 是 array 对 象 ; 


for ( var i = 0, fn, ary = [ 'push', 'shift', 'forEach' ]; fn = ary[ i++ ]; ){ 
Array[ fn ] = Array.prototypel[l fn ].uncurrying(); 


}; 

var obj = { 
"length": 3， 
0" 13 
"A DS 
"2": 3 

}; 


Array.push( obj, 4 ); // 向 对 象 中 添加 一 个 元 素 
console.1og( obj.length ); // 输出 : 4 


var first = Array.shift( obj ); // 截取 第 一 个 元 素 
console.1og( first ); // 输出 : 1 
console.log( obj ); // 输出 : {0: 2，1: 3，2: 4, length: 3} 


Array.forEach( obj, function( i, n ){ 
console.log( n ); // 分 别 输出 : 0，1，2 
}); 


甚至 Function.prototype.call 和 Function.prototype.apply 本 身 也 可 以 被 uncurrying, 不 过 这 
没有 实用 价值 ， 只 是 使 得 对 函数 的 调用 看 起 来 更 像 JavaScript 语言 的 前 身 Scheme: 
var call = Function.prototype.call.uncurrying(); 


var fn = function( name ){ 
console.log( name ); 
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}; 


call( fn, window, 'sven' ); // 输出 : sven 


var apply = Function.prototype.apply.uncurrying(); 
var fn = function( name ){ 
console.log( this.name ); // 输出 : "sven" 
console.log( arguments ); // 输出 : [1，2，3] 
}; 
apply( fn, { name: 'sven' }, [ 1, 2, 3 ] ); 


目前 我 们 已 经 给 出 了 Function.prototype.uncurrying 的 一 种 实现 。 


Array.prototype.push.uncurrying() 这 人 句 代 码 时 发 生 了 什么 事情 : 


弄 


接 控 出 


Function.prototype.uncurrying = function () { 
var self = this; // self 此 时 是 Array.prototype.push 
return function() { 
var obj = Array.prototype.shift.call( arguments ); 


// obj 是 { 

// "length": 1, 
// "0 1 

//} 


// arguments 对 象 的 第 一 个 元 素 被 截 去 ， 剩 下 [2] 
return self.apply( obj, arguments ); 
// 相当 于 Array.prototype.push.apply( obj, 2 ) 


}; 
}; 
var push = Array.prototype.push.uncurrying(); 
var obj = { 
"length": 1， 
"0": 1 
}; 


push( obj，2 ); 
console.log( obj ); // 输出 : {0: 1, 1: 2,， length: 2} 


现在 来 分 析 调 用 


除了 刚刚 提供 的 代码 实现 ， 下 面 的 代码 是 uncurrying 的 另外 一 种 实现 方式 : 


Function.prototype.uncurrying = function(){ 
var self = this; 
return function(){ 
return Function.prototype.call.apply( self, arguments ); 
} 


六 


3. 函数 节 流 


JavaScript 中 的 函数 大 多 数 情 况 下 都 是 由 用 户主 动 调用 触发 的 ， 除 非 是 函数 本 身 的 实现 不 合 


否则 我 们 一 般 不 会 遇 到 跟 性 能 相关 的 问题 。 但 在 一 些 少数 情况 下， 函数 的 触发 不 是 由 用 户 直 
| 的 。 在 这 些 场 景 下 ， 函 数 有 可 能 被 非常 频 索 地 调用 ， 而 造成 大 的 性 能 问题 。 下 面 将 列举 一 


些 这 样 的 场景 。 
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(1) 函数 被 频繁 调用 的 场景 


口 window.onresize 事件 。 我 们 给 window 对 象 绑 定 了 resize 事件 ， 当 浏览 器 窗口 大 小 被 拖 动 
而 改变 的 时 候 ， 这 个 事件 触发 的 频率 非常 之 高 。 如 果 我 们 在 window.onresize 事件 函数 里 
有 一 些 跟 DOM 节点 相关 的 操作 ， 而 跟 DOM 节点 相关 的 操作 往往 是 非常 消耗 性 能 的 ， 这 
时 候 浏览 絮 可 能 就 会 吃不消 而 造成 卡 顿 现象 。 

口 mousemove 事件 。 同 样 ， 如 果 我 们 给 一 个 div 节点 绑 定 了 拖 电 事件 ( 主要 是 mousemove )， 当 

div 节点 被 拖 动 的 时 候 ， 也 会 频繁 地 触发 该 拖 忠 事件 也 数 。 

口 上 传 进 度 。 微 去 的 上 传 功能 使 用 了 公司 提供 的 一 个 浏览 器 插件 。 该 浏览 器 插件 在 真正 开 
始 上 传 文件 之 前 , 会 对 文件 进行 扫描 并 随时 通知 JavaScript 函数 ， 以 便 在 页 面 中 显示 当前 
的 扫描 进度 。 但 该 插件 通知 的 频率 非常 之 高 ， 大 约 一 秒 钟 10 次 ， 很 显然 我 们 在 页 面 中 不 
需要 如 此 频繁 地 去 提示 用 户 。 

(2) 郴 数 节 流 的 原理 

我 们 整理 上 面 提 到 的 三 个 场景 ， 发 现 它们 面临 的 共同 问题 是 函数 被 触发 的 频率 太 高 。 

比如 我 们 在 window.onresize 事件 中 要 打印 当前 的 浏览 器 窗口 大 小 ， 在 我 们 通过 拖 忠 来 改变 
窗口 大 小 的 时 候 ， 打印 窗口 大 小 的 工作 1 秒 钟 进行 了 10 次。 而 我 们 实际 上 只 需要 2 次 或 者 3 次 。 

这 就 需要 我 们 按时 间 有 段 来 忽略 掉 一 些 事 件 请 求 ， 比 如 确保 在 500ms 内 只 打印 一 次 。 很 显然 , 我 们 

可 以 借助 setTimeout 来 完成 这 件 事情 。 


(3) 函数 节 流 的 代码 实现 


关于 函数 节 流 的 代码 实现 有 许多 种 , 下 面 的 throttle 函数 的 原理 是 , 将 即将 被 执行 的 函数 用 
setTimeout 延迟 一 段 时 间 执行 。 和 如果 该 次 延迟 执行 还 没有 完成， 则 忽略 接 下 来 调用 该 函数 的 请 求 。 
throttle 函数 接受 2 个 参数 ,第 一 个 参数 为 需要 被 延迟 执行 的 函数 ， 第 二 个 参数 为 延迟 执行 的 时 
间 。 具 体 实现 代码 如 下 : 


var throttle = function ( fn, interval ) { 


var _ self = fn, // 保存 需要 被 延迟 执行 的 函数 引用 
timer, // 定时 器 
firstTime = true; // 是 否 是 第 一 次 调用 


return function () { 
var args = arguments, 
_me = this; 


if ( firstTime ) { // 如 果 是 第 一 次 调用 ， 不 需 延 迟 执行 
_self.apply(_ me, args); 
return firstTime = false; 


} 


if ( timer ) {  // 如 果 定 时 器 还 在 ， 说 明 前 一 次 延迟 执行 还 没有 完成 
return false; 
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} 

timer = setTimeout(function () { // 延迟 一 段 时 间 执 行 
clearTimeout (timer); 
timer = null; 
_self.apply(_ me, args); 

}, interval || 500 ); 

}; 
}; 


window.onresize = throttle(function(){ 
console.log( 1 ); 
}, 500 ); 


4. 分 时 函数 
在 前 面 关于 函数 节 流 的 讨论 中 , 我 们 提供 了 一 种 限制 函数 被 频繁 调用 的 解决 方案 。 下面 我 们 


将 遇 到 另外 一 个 问题 ， 某 些 函 数 确实 是 用 户主 动 调用 的 , 但 因为 一 些 客观 的 原因 ， 这些 函数 会 严 
重地 影响 页 面 性 能 。 


邮 


一 个 例子 是 创建 WebQQ 的 QQ 好友 列 表 。 列 表 中 通常 会 有 成 百 上 千 个 好 友 ， 如 果 一 个 好 友 


用 一 个 市 点 来 表示 ， 当 我 们 在 页 面 中 泻 染 这 个 列表 的 时 候 , 可 能 要 一 次 性 往 页 面 中 创建 成 百 上 干 


个 节点 。 


在 短 时 间 内 往 页 面 中 大 量 添加 DOM 节点 显然 也 会 让 浏览 器 吃不消 , 我 们 看 到 的 结果 往往 就 


是 浏览 需 的 卡 顿 甚至 假死 。 代 码 如 下 : 


var ary = []; 


for ( var i = 1; i <= 1000; i++ ){ 
ary.push( i ); // 假设 ary 装载 了 1000 个 好 友 的 数据 


中 


var renderFriendList = function( data ){ 
for ( var i = 0, 1 = data.length; i < 1; i+t+ ){ 
var div = document.createElement( 'div' ); 
div.innerHTML = i; 
document.body.appendChild( div ); 
} 
}; 


renderFriendList( ary ); 


这 个 问题 的 解决 方案 之 一 是 下 面 的 timeChunk 函数 ，timeChunk 函数 让 创建 节点 的 工作 分 批 进 


， 比 如 把 1 秒 钟 创建 1000 个 节点 ， 改 为 每 隔 200 毫秒 创建 8 个 节点 。 


timeChunk 函数 接受 3 个 参数 , 第 1 个 参数 是 创建 节点 时 需要 用 到 的 数据 , 第 2 个 参数 是 封装 
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了 创建 节点 逻辑 的 函数 ， 第 3 个 参数 表示 每 一 批 创建 的 节点 数量 。 代 码 如 下 : 
var timeChunk = function( ary, fn, count ){ 


var obj, 
t; 


var len = ary.length; 


var start = function(){ 
for (var i = 0; i < Math.min( count || 1, ary.length ); i++ ){ 
var obj = ary.shift(); 
fn( obj ); 


}; 
return function(){ 
t = setInterval(function(){ 
if ( ary.length === 0 ){ // 如 果 全 部 节点 都 已 经 被 创建 好 


return clearInterval( t ); 
} 


start(); 
}, 200 ); // 分 批 执行 的 时 间 间 隔 ， 也 可 以 用 参数 的 形式 传 入 


}; 


最 后 我 们 进行 一 些小 测试 , 假设 我 们 有 1000 个 好 友 的 数据 ,我 们 利用 timeChunk 函数 ， 每 一 
批 只 往 页 面 中 创建 8 个 节点 : 


var ary = []; 


for ( var i = 1; i <= 1000; i++ ){ 
ary.push( i ); 
}; 


var renderFriendList = timeChunk( ary, function( n ){ 
var div = document.createElement( 'div' ); 
div.innerHTML = n; 
document.body.appendChild( div ); 


}, 8 ); 

renderFriendList(); 

5. 惰性 加 载 函数 

在 Web 开发 中 ， 因 为 浏览 旨 之 间 的 实现 差异 ， 一 些 嗅 探 工 作 总 是 不 可 避免 。 比 如 我 们 需要 
一 个 在 各 个 浏览 器 中 能 够 通用 的 事件 绑 定 函数 addEvent， 常 见 的 写法 如 下 : 

var addEvent = function( elem, type, handler ){ 


if ( window.addEventListener ){ 
return elem.addEventListener( type, handler, false ); 
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} 
if ( window.attachEvent ){ 
return elem.attachEvent( 'on' + type, handler ); 
} 
}; 
这 个 函数 的 缺点 是 ， 当 它 每 次 被 调用 的 时 候 都 会 执行 里 面 的 if 条 件 分 支 ， 虽然 执行 这 些 if 
分 支 的 开销 不 算 大 ,但 也 许 有 一 些 方 法 可 以 让 程序 避免 这 些 重 复 的 执行 过 程 。 
第 二 种 方案 是 这 样 , 我 们 把 嗅 探 浏 览 器 的 操作 提前 到 代码 加 载 的 时 候 , 在 代码 加 载 的 时 候 就 
立刻 进行 一 次 判断 ， 以 便 让 addEvent 返回 一 个 包 右 了 正确 逻辑 的 函数 。 代 码 如 下 : 
var addEvent = (function(){ 
if ( window.addEventListener ){ 


return function( elem, type, handler ){ 
elem.addEventListener( type, handler, false ); 


} 


} 
if ( window.attachEvent ){ 


return function( elem, type, handler ){ 
elem.attachEvent( 'on' + type, handler ); 


} 
} 
DO; 
目前 的 addEvent 函数 依然 有 个 缺点 , 也 许 我 们 从 头 到 尾 都 没有 使 用 过 addEvent 函数 , 这 样 看 
来 ， 前 一 次 的 浏览 器 嗅 探 就 是 完全 多 余 的 操作 ， 而 且 这 也 会 稍稍 延长 页 面 ready 的 时 间 。 
第 三 种 方案 即 是 我 们 将 要 讨论 的 惰性 载 人 函数 方案 。 此 时 addEvent 依然 被 声明 为 一 个 普通 函 
数 , 在 函数 里 依然 有 一 些 分 支 判断 。 但 是 在 第 一 次 进入 条 件 分 支 之 后 , 在 函数 内 部 会 重 写 这 个 函 
数 , 重 写 之 后 的 函数 就 是 我 们 期 望 的 addEvent 函数 ,在 下 一 次 进入 addEvent 函数 的 时 候 , addEvent 
函数 里 不 再 存在 条 件 分 支 语句 : 
<html> 
<body> 


<div id="div1"> 点 我 绑 定 事件 </divy 
“SCITipt> 


var addEvent = function( elem, type, handler ){ 
if ( window.addEventListener ){ 
addEvent = function( elem, type, handler ){ 
elem.addEventListener( type, handler, false ); 


}else if ( window.attachEvent ){ 
addEvent = function( elem, type, handler ){ 
elem.attachEvent( 'on' + type, handler ); 
} 
} 


addEvent( elem, type, handler ); 
}; 
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var div = document.getElementById( “div1”); 


addEvent( div, 'click', function(){ 
alert (1); 
}); 


addEvent( div, 'click', function(){ 
alert (2); 
]); 


</ScTipt> 
</body> 
</html> 


3.3 小 结 


在 进入 设计 模式 的 学 习 之 前 , 本 章 挑选 了 闭 包 和 高 阶 函 数 来 进行 讲解 。 这 是 因为 在 JavaScript 
开发 中 ， 闭 包 和 高 阶 函 数 的 应 用 极 多 。 就 设计 模式 而 言 ， 因 为 JavaScript 这 门 语言 的 自身 特点 ， 
许多 设计 模式 在 JavaScript 之 中 的 实现 跟 在 一 些 传统 面向 对 象 语言 中 的 实现 相差 很 大 。 在 
JavaScript 中 ， 很 多 设计 模式 都 是 通过 闭 包 和 高 阶 函数 实现 的 。 这 并 不 奇怪 ， 相 对 于 模式 的 实现 
过 程 ， 我 们 更 关注 的 是 模式 可 以 帮助 我 们 完成 什么 。 
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第 一 部 分 


设计 模式 


现在 ， 我 们 终于 步 人 了 设计 模式 学 习 的 殿堂 。 

在 将 函数 作为 一 等 对 象 的 语言 中 ， 有 许多 需要 利用 对 象 多 态 性 的 设计 模式 ， 比 如 命令 模式 、 
策略 模式 等 , 这 些 模式 的 结构 与 传统 面向 对 象 语言 的 结构 大 相 径 庭 , 实际 上 已 经 融入 到 了 语言 之 
中 ， 我 们 可 能 经 常 使 用 它们 ， 只 是 不 知道 它们 的 名 字 而 已 。 

第 二 部 分 并 没有 全 部 涵盖 GoF 所 提出 的 23 种 设计 模式 ， 而 是 选择 了 在 JavaScript 开发 中 更 
常见 的 14 种 设计 模式 。 
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入 和 人 4 下 六 


中 分 早 


单 例 模式 


单 例 模式 的 定义 是 : 保证 一 个 类 仅 有 一 个 实例 ， 并 提供 一 个 访问 它 的 全 局 访问 点 。 

单 例 模 式 是 一 种 常用 的 模式 ， 有 一 些 对 象 我 们 往往 只 需要 一 个 ， 比 如 线程 池 、 全 局 缓存 、 浏 
览 器 中 的 window 对 象 等 。 在 JavaScript 开发 中 ， 单 例 模式 的 用 途 同样 非常 广泛 。 试 想 一 下 ， 当 我 
们 单 击 登 录 按 钮 的 时 候 ， 页面 中 会 出 现 一 个 登录 浮 窗 ， 而 这 个 登录 浮 窗 是 唯一 的 , 无论 单 击 多 少 
次 登录 按钮 ， 这 个 浮 窗 都 只 会 被 创建 一 次 ， 那 么 这 个 登录 浮 窗 就 适合 用 单 例 模式 来 创建 。 


4.1 实现 单 例 模式 


要 实现 一 个 标准 的 单 例 模式 并 不 复杂 , 无 非 是 用 一 个 变量 来 标志 当前 是 否 已 经 为 某 个 类 创建 
过 对 象 ， 如 果 是 ， 则 在 下 一 次 获取 该 类 的 实例 时 ， 直 接 返回 之 前 创建 的 对 象 。 代 码 如 下 : 
var Singleton = function( name ){ 


this.name = name; 
this.instance = null; 


Singleton.prototype.getName = function(){ 
alert ( this.name ); 

}; 

Singleton.getInstance = function( name ){ 


if ( !this.instance ){ 
this.instance = new Singleton( name ); 


return this.instance; 


3 


var a = Singleton.getInstance( 'sven1' ); 
var b = Singleton.getInstance( 'sven2' ); 


alert ( a === b ); // true 
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或 者 : 


var Singleton = function( name ){ 
this.name = name; 


} 


Singleton.prototype.getName = function(){ 
alert ( this.name ); 


}; 


Singleton.getInstance = (function(){ 
var instance = null; 
return function( name ){ 
if ( linstance ){ 
instance = new Singleton( name ); 
} 


return instance; 
} 
])(); 


我 们 通过 singleton.getInstance 来 获取 Singleton 类 的 唯一 对 象 ， 这 种 方式 相对 简单 ， 但 有 
一 个 问题 ， 就 是 增加 了 这 个 类 的 “不 透明 性 ”，singleton 类 的 使 用 者 必须 知道 这 是 一 个 单 例 类 ， 
跟 以 往 通过 new XXX 的 方式 来 获取 对 象 不 同 ， 这 里 偏 要 使 用 singleton.getInstance 来 获取 对 象 。 
接 下 来 顺便 进行 一 些小 测试 ， 来 证 明 这 个 单 例 类 是 可 以 信赖 的 : 


Var a 
var b 


= Singleton.getInstance( 'sven1' ); 
= Singleton.getInstance( 'sven2' ); 


alert ( a === b ); // true 


虽然 现在 已 经 完成 了 一 个 单 例 模式 的 编写 , 但 这 段 单 例 模式 代码 的 意义 并 不 大 。 从 下 一 广 开 
台 ， 我 们 将 一 步 步 编 写 出 更 好 的 单 例 模式 。 


4.2 透明 的 单 例 模式 


我 们 现在 的 目标 是 实现 一 个 “透明 ”的 单 例 类 ,用 户 从 这 个 类 中 创建 对 象 的 时 候 ， 可 以 像 使 
用 其 他 任何 普通 类 一 样 。 在 下 面 的 例子 中 ， 我 们 将 使 用 CreateDiv 单 例 类 ， 它 的 作用 是 负责 在 页 
面 中 创建 唯一 的 div 节点 ， 代 码 如 下 : 


var CreateDiv = (function(){ 


var instance; 


var CreateDiv = function( html ){ 
if ( instance ){ 
return instance; 


} 
this.html = html; 
this.init(); 
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return instance = this; 


3 


CreateDiv.prototype.init = function(){ 
var div = document.createElement( 'div' ); 
div.innerHTML = this.html; 
document.body.appendChild( div ); 

}; 


return CreateDiv; 


])(); 


var a = new CreateDiv( 'sven1' ); 
var b = new CreateDiv( 'sven2' ); 


alert (a==-=b);  // true 

虽然 现在 完成 了 一 个 透明 的 单 例 类 的 编写 ， 但 它 同 样 有 一 些 缺点 。 

为 了 把 instance 封装 起 来 , 我 们 使 用 了 自 执行 的 匿名 函数 和 闭 包 , 并 且 让 这 个 匿名 函数 返回 
真正 的 Singleton 构造 方法 ， 这 增加 了 一 些 程序 的 复杂 度 ， 阅 读 起 来 也 不 是 很 舒服 。 

观察 现在 的 Singleton 构造 消 数 ; 

var CreateDiv = function( html ){ 


if ( instance ){ 
return instance; 


} 
this.html = html; 
this.init(); 
return instance = this; 
}; 
在 这 段 代 码 中 ，CreateDiv 的 构造 函数 实际 上 负责 了 两 件 事情 。 第 一 是 创建 对 象 和 执行 初始 
化 in 让 方法 ， 第 二 是 保证 只 有 一 个 对 象 。 虽 然 我 们 目前 还 没有 接触 过 “单一 职责 原则 ”的 概念 ， 
但 可 以 明确 的 是 ， 这 是 一 种 不 好 的 做 法 ， 至 少 这 个 构造 函数 看 起 来 很 奇怪 。 
假设 我 们 某 天 需要 利用 这 个 类 ， 在 页 面 中 创建 千 千 万 万 的 div， 即 要 让 这 个 类 从 单 例 类 变 成 
一 个 普通 的 可 产生 多 个 实例 的 类 ， 那 我 们 必须 得 改写 createDiv 构造 函数 ， 把 控制 创建 唯一 对 象 
的 那 一 段 去 掉 ， 这 种 修改 会 给 我 们 带 来 不 必要 的 烦恼 。 


4.3 用 代理 实现 单 例 模式 

现在 我 们 通过 引入 代理 类 的 方式 ,来 解决 上 面 提 到 的 问题 。 

我 们 依然 使 用 4.2 节 中 的 代码 ， 首 先 在 CreateDiv 构造 函数 中 ,把 负责 管理 单 例 的 代码 移 除 
出 去 ， 使 它 成 为 一 个 普通 的 创建 div 的 类 


var CreateDiv = function( html ){ 
this.html = html; 
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this.init(); 
2 
CreateDiv.prototype.init = function(){ 
var div = document.createElement( 'div' ); 
div.innerHTML = this.html; 


document .body.appendChild( div ); 
}; 


接 下 来 引入 代理 类 proxysingletonCreateDiv: 


var ProxySingletonCreateDiv = (function(){ 


var instance; 
return function( html ){ 
if ( linstance ){ 
instance = new CreateDiv( html ); 


} 


return instance; 


} 
])(); 


Var a = new ProxySingletonCreateDiv( 'sven1' ); 
var b = new ProxySingletonCreateDiv( 'sven2' ); 


alert ( a === b ); 


通过 引入 代理 类 的 方式 , 我 们 同样 完成 了 一 个 六 


f 例 模式 的 编写 ， 跟 之 前 不 同 的 是 ,现在 我 们 


把 负责 管理 单 例 的 逻辑 移 到 了 代理 类 proxySingletonCreateDiv 中 。 这样 一 来 , CreateDiv 就 变 成 了 


一 个 普通 的 类 ， 它 跟 proxySingletonCreateDiv 组 合 起 来 可 以 达到 单 例 模式 的 效 呈 


日 
代 o 


本 例 是 缓存 代理 的 应 用 之 一 ， 在 第 6 章 中 ,我 们 将 继续 了 解 代 理 带 来 的 好 处 。 


4.4 JavaScript 中 的 单 例 模式 


前 面 提 到 的 几 种 单 例 模式 的 实现 ， 更 多 的 是 


接近 传统 面向 对 象 语言 


中 的 实现 ， 单 例 对 象 从 


“类 ”中 创建 而 来 。 在 以 类 为 中 心 的 语言 中 ， 这 是 很 自然 的 做 法 。 比 如 在 Java 中 ， 如 果 需 要 某 个 
对 象 ， 就 必须 先 定义 一 个 类 ， 对 象 总 是 从 类 中 创建 而 来 的 。 
但 JavaScript 其 实 是 一 门 无 类 (class-free ) 语言 ， 也 正 因 为 如 此 ， 生 搬 单 例 模 式 的 概念 并 无 


意义 。 在 JavaScript 中 创建 对 象 的 方法 非常 简单 


， 既 然 我 们 只 需要 一 个 


“ 唯 


”的 对 象 ， 为 什 


么 要 为 它 先 创建 一 个 “类 ” 呢 ? 这 无 异 于 穿 棉衣 洗澡 ,传统 的 单 例 模式 实现 在 JavaScript 中 并 


不 适用 。 


单 例 模式 的 核心 是 确保 只 有 一 个 实例 ， 并 提供 全 局 访问 。 
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全 局 变量 不 是 单 例 模式 ,但 在 JavaScript 开发 中 ， 我 们 经 常会 把 全 局 变量 当成 单 例 来 使 用 。 
例如 : 


var a = {}; 


当 用 这 种 方式 创建 对 象 a 时 , 对象 a 确实 是 独一无二 的 。 如 果 a 变量 被 声明 在 全 局 作用 域 下 ， 
则 我 们 可 以 在 代码 中 的 任何 位 置 使 用 这 个 变量 , 全 局 变量 提供 给 全 局 访问 是 理所当然 的 。 这 样 就 
满足 了 单 例 模式 的 两 个 条 件 。 

但 是 全 局 变量 存在 很 多 问题 , 它 很 容易 造成 命名 空间 污染 。 在 大 中 型 项 目 中 ， 如果 不 加 以 限 
制 和 管理 ， 程 序 中 可 能 存在 很 多 这 样 的 变量 。JavaScript 中 的 变量 也 很 容易 被 不 小 心 覆 盖 ， 相 信 
每 个 JavaScript 程序 员 都 曾经 历 过 变量 冲突 的 痛苦 ， 就 像 上 面 的 对 象 var a = {};， 随 时 有 可 能 被 
别人 覆盖 。 

Douglas Crockford 多 次 把 全 局 变量 称 为 JavaScript 中 最 糟糕 的 特性 ,在 对 JavaScript 的 创造 者 
Brendan Eich 的 访谈 中 ， Brendan Eich 本 人 也 承认 全 局 变量 是 设计 上 的 失误 ， 是 在 没有 足够 的 时 
间 思 考 一 些 东 西 的 情况 下 导致 的 结 

作为 普通 的 开发 者 , 我 们 有 必要 尽量 减少 全 局 变量 的 使 用 ， 即 使 需要 ,也 要 把 它 的 污染 降 到 
最 低 。 以 下 几 种 方式 可 以 相对 降低 全 局 变量 带 来 的 命名 污染 。 

1. 使 用 命名 空间 

适当 地 使 用 命名 空间 ， 并 不 会 杜绝 全 局 变量 ,但 可 以 减少 全 局 变量 的 数量 。 

最 简单 的 方法 依然 是 用 对 象 字面 量 的 方式 : 


var namespace1 = { 
a: function(){ 
alert (1); 


}, 
b: function(){ 
alert (2); 
} 
}; 
把 a 和 b 都 定义 为 namespacel 的 属性 ， 这 样 可 以 减少 变量 和 全 局 作用 域 打 交道 的 机 会 。 男 外 
我 们 还 可 以 动态 地 创建 命名 空间 ， 代 码 如 下 ( 引 自 Object-Oriented JavaScrtipt 一 书 ): 


var MyApp = {}; 


MyApp.namespace = function( name ){ 
var parts = name.split( '.'" ); 
var current = MyApp; 
for ( var i in parts ){ 

if ( lcurrent[ parts[ i ] ] 
current[ parts[ i ] ] = 
} 


current = current[ parts[ i ] ]; 


){ 
{}; 
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} 
}; 


MyApp.namespace( 'event' ); 
MyApp.namespace( 'dom.style' ); 


console.dir( MyApp ); 
// 上 述 代 码 等 价 于 : 
var MyApp = { 

event: {}, 


dom: { 
style: {} 


}; 
2. 使 用 闭 包 封装 私有 变量 
这 种 方法 把 一 些 变量 封装 在 闭 包 的 内 部 ， 只 暴露 一 些 接口 跟 外 界 通信 : 


var user = (function(){ 
var _name = 'sven', 


_ age = 29; 
return { 
getUserInfo: function(){ 
return name + '-' + _ age; 
jh 
} 
])(); 


我 们 用 『 划 线 来 约定 私有 变量 _name 和 _ age， 人 外 部 是 
访问 不 到 这 两 个 变量 的 ， 这 就 避免 了 对 全 局 的 命令 污 


4.5 “惰性 单 例 
前 面 我 们 了 解 了 单 例 模 式 的 一 些 实现 办 法 ， 本 节 我 们 来 了 解 惰 性 单 例 。 
惰性 单 例 指 的 是 在 需要 的 时 候 才 创建 对 象 实例 。 惰 性 单 例 是 单 例 模式 的 重点 ,这 种 技术 在 实 
际 开发 中 非常 有 用 ， 有 用 的 程度 可 能 超出 了 我 们 的 想象 ， 实 际 上 在 本 章 开头 就 使 用 过 这 种 技术 ， 
instance 实例 对 象 总 是 在 我 们 调用 Singleton.getInstance 的 时 候 才 被 创建 ， 而 不 是 在 页 面 加 载 好 
的 时 候 就 创建 ， 代 码 如 下 : 
Singleton.getInstance = (function(){ 
var instance = null; 
return function( name ){ 


if ( linstance ){ 
instance = new Singleton( name ); 
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} 


return instance; 


} 
DO; 
不 过 这 是 基于 “类 ”的 单 例 模式 ， 前 面 说 过 ， 基 于 “类 ”的 单 例 模 式 在 JavaScript 中 并 不 适 
用 ， 下 面 我 们 将 以 WebQQ 的 登录 浮 窗 为 例 ， 介 绍 与 全 局 变量 结合 实现 惰性 的 单 例 。 
假设 我 们 是 WebQQ 的 开发 人 员 ( 网 址 是 web.qq.com )， 当 点 击 左边 导航 里 QQ 头像 时 , 会 弹 
出 一 个 登录 浮 窗 ( 如 图 4-1 所 示 )， 很 明显 这 个 浮 窗 在 页 面 里 总 是 唯一 的 ， 不 可 能 出 现 同时 存在 
两 个 登录 窗口 的 情况 。 


图 4-1 


藏 状 态 的 ， 当 用 户 点 击 登 录 按 钮 的 时 候 ， 它 才 开始 显示 : 


<html> 
<body> 
<button id="loginBtn"> 登 录 </button> 
</body> 


<script> 
var loginLayer = (function(){ 
var div = document.createElement( 'div' ); 
div.innerHTML = ' 我 是 登录 浮 窗 '; 
div.style.display = 'none'; 
document .body.appendChild( div ); 
return div; 


])(); 


document .getElementById( 'loginBtn' ).onclick = function(){ 
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loginLayer.style.display = 'block'; 
}; 
</script> 
</html> 


这 种 方式 有 一 个 问题 ， 也 许 我 们 进入 WebQQ 只 是 玩 玩 游戏 或 者 看 看 天 气 ， 根 本 不 需要 进行 
登录 操作 ， 因 为 登录 浮 窗 总 是 一 开始 就 被 创建 好 ， 那 么 很 有 可 能 将 白白 浪费 一 些 DOM 节点 。 
现在 改写 一 下 代码 ,使 用 户 点 击 登 录 按钮 的 时 候 才 开 始 创 建 该 浮 窗 : 


<html> 
<body> 
<button id="loginBtn"> 登 录 </button> 
</body> 
<script> 


var createLoginLayer = function(){ 
var div = document.createElement( 'div' ); 
div.innerHTML = ' 我 是 登录 浮 窗 '; 
div.style.display = 'none'; 
document.body.appendChild( div ); 
return div; 


} 


document .getElementById( 'loginBtn' ).onclick = function(){ 
var loginLayer = createLoginLayer(); 
loginLayer.style.display = 'block'; 
}; 
</script> 
</html> 


虽然 现在 达到 了 惰性 的 目的 , 但 失去 了 单 例 的 效果 。 当 我 们 每 次 点 击 登录 按钮 的 时 候 ， 都 会 
创建 一 个 新 的 登录 浮 窗 div。 虽 然 我 们 可 以 在 点 击 浮 窗 上 的 关闭 按钮 时 〈 此 处 未 实现 ) 把 这 个 浮 
窗 从 页 面 中 删除 掉 ， 但 这 样 频繁 地 创建 和 删除 节点 明显 是 不 合理 的 ， 也 是 不 必要 的 。 


也 许 读者 已 经 想到 了 , 我 们 可 以 用 一 个 变量 来 判断 是 否 已 经 创建 过 登录 浮 窗 , 这 也 是 丁 第 
一 段 代码 中 的 做 法 : 


var createLoginLayer = (function(){ 
var div; 
return function(){ 
if ( 1div ){ 
div = document.createElement( 'div' ); 
div.innerHTML = ' 我 是 登录 浮 窗 '; 
div.style.display = 'none'; 
document .body.appendChild( div ); 
} 


return div; 


} 
])(); 
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document .getElLementById( 'loginBtn' ).onclick = function(){ 
var loginLayer = createLoginLayer(); 
loginLayer.style.display = 'block'; 


4.6 ”通用 的 惰性 单 例 


上 一 节 我 们 完成 了 一 个 可 用 的 惰性 单 例 ， 但 是 我 们 发 现 它 还 有 如 下 一 些 问题 。 


口 这 段 代码 仍然 是 违反 单一 职责 原则 的 , 创建 对 象 和 管理 单 例 的 逻辑 都 放 在 createLoginLayer 
对 象 内 部 。 

口 如 果 我 们 下 次 需要 创建 页 面 中 唯一 的 iframe， 或 者 script 标签 ， 用 来 跨 域 请 求 数据 ， 就 
必须 得 如 法 炮制 ， 把 createLoginLayer 函数 几乎 照抄 一 遍 : 


var createIframe= (function(){ 
var iframe; 
return function(){ 
if ( !liframe){ 
iframe= document.createElement( 'iframe' ); 
iframe.style.display = 'none'; 
document.body.appendChild( iframe); 


return iframe; 
} 
])(); 


我 们 需要 把 不 变 的 部 分 隔离 出 来 , 先 不 考虑 创建 一 个 div 和 创建 一 个 iframe 有 多 少 差异 , 管 
理 单 例 的 逻辑 其 实 是 完全 可 以 抽象 出 来 的 , 这 个 逻辑 始终 是 一 样 的 : 用 一 个 变量 来 标志 是 否 创建 
过 对 象 ， 如 果 是 ， 则 在 下 次 直接 返回 这 个 已 经 创建 好 的 对 象 : 
var obj; 
if ( !obj ){ 
obj = xxx; 
} 
现在 我 们 就 把 如 何 管理 单 例 的 逻辑 从 原来 的 代码 中 抽 离 出 来 ， 这 些 逻 辑 被 封装 在 getsingle 
函数 内 部 ， 创 建 对 象 的 方法 fn 被 当成 参数 动态 传人 getsingle 函数 : 
var getSingle = function( fn ){ 
var result; 


return function(){ 
return result || ( result = fn .apply(this, arguments ) ); 
} 


}; 


接 下 来 将 用 于 创建 登录 浮 窗 的 方法 用 参数 fn 的 形式 传人 getsingle， 我 们 不 仅 可 以 传 入 
createLoginLayer， 还 能 传人 createScript 、createIframe 、createXhr 等 。 之 后 再 让 getSingle 返回 
一 个 新 的 函数 ， 并 且 用 一 个 变量 result 来 保存 fn 的 计算 结果 。result 变量 因为 身 在 闭 包 中 ， 它 
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永远 不 会 被 销毁 。 在 将 来 的 请 求 中 ， 如 果 result 已 经 被 赋值 ， 那 么 它 将 返回 这 个 值 。 代 码 如 下 : 


var createLoginLayer = function(){ 
var div = document.createElement( 'div' ); 
div.innerHTML = ' 我 是 登录 浮 窗 '; 
div.style.display = 'none'; 
document .body.appendChild( div ); 
return div; 


}; 
var createSingleLoginLayer = getSingle( createLoginLayer ); 


document.getElementById( 'loginBtn' ).onclick = function(){ 
var loginLayer = createSingleLoginLayer(); 
loginLayer.style.display = 'block'; 


下 面 我 们 再 试 试 创建 唯一 的 iframe 用 于 动态 加 载 第 三 方 页 面 : 


var createSinglelframe = getSingle( function(){ 
var iframe = document.createElement ( 'iframe' ); 
document .body.appendChild( iframe ); 
return iframe; 


}); 


document.getElementById( 'loginBtn' ).onclick = function(){ 
var loginLayer = createSingleIframe(); 
loginLayer.src = 'http://baidu.com'; 
在 这 个 例子 中 , 我 们 把 创建 实例 对 象 的 职责 和 管理 单 例 的 职责 分 别 放置 在 两 个 方法 里 , 这 两 
个 方法 可 以 独立 变化 而 互 不 影响 , 当 它 们 连接 在 一 起 的 时 候 , 就 完成 了 创建 唯一 实例 对 象 的 功能 ， 
看 起 来 是 一 件 挺 奇妙 的 事情 。 


这 种 单 例 模式 的 用 途 远 不 止 创建 对 象 ， 比 如 我 们 通常 泻 染 完 页 面 中 的 一 个 列表 之 后 , 接 下 来 
要 给 这 个 列表 绑 定 click 事件 , 如 果 是 通过 ajax 动态 往 列表 里 追加 数据 , 在 使 用 事件 代理 的 前 提 
下 ，click 事件 实际 上 只 需要 在 第 一 次 泻 染 列表 的 时 候 被 绑 定 一 次 ， 但 是 我 们 不 想 去 判断 当前 是 
和 否 是 第 一 次 泻 染 列表 ， 如 果 借 助 于 jQuery， 我 们 通常 选择 给 节点 绑 定 one 事件 : 
var bindEvent = function(){ 
$( "div' ).one( 'click', function(){ 


alert ( 'click' ); 
}); 


}; 


var render = function(){ 
console.log( ' 开 始 演 染 列表 ' ); 
bindEvent(); 

}; 


render(); 
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render(); 
render(); 


如 果 利 用 getsingle 函数 ， 也 能 达到 一 样 的 效果 。 代 码 如 下 : 


var bindEvent = getSingle(function(){ 
document .getElementById( “div1”).onclick = function(){ 
alert ( 'click' ); 
} 


return true; 


}); 


var render = function(){ 
console.log( ' 开 始 泻 染 列表 ' ); 
bindEvent(); 

}; 


render(); 
render(); 
render(); 


可 以 看 到 ，render 函数 和 bindEvent 函数 都 分 别 执行 了 3 次 ,但 div 实际 上 只 被 绑 定 了 一 个 


4.7 小 结 


单 例 模 式 是 我 们 学 习 的 第 一 个 模式 , 我 们 先 学 习 了 传统 的 单 例 模式 实现 , 也 了 解 到 因为 语言 
的 差异 性 , 有 更 适合 的 方法 在 JavaScript 中 创建 单 例 。 这 一 章 还 提 到 了 代理 模式 和 单一 职责 原则 ， 
后 面 的 章节 会 对 它们 进行 更 详细 的 讲解 。 

在 getsinge 函数 中 , 实际 上 也 提 到 了 闭 包 和 高 阶 函数 的 概念 。 单 例 模 式 是 一 种 简单 但 非常 实 
用 的 模式 ， 特 别 是 惰性 单 例 技 术 ， 在 合适 的 时 候 才 创建 对 象 ,， 并 且 只 创建 唯一 的 一 个 。 更 奇妙 的 
是 , 创建 对 象 和 管理 单 例 的 职责 被 分 布 在 两 个 不 同 的 方法 中 , 这 两 个 方法 组 合 起 来 才 具 有 单 例 模 
式 的 威力 。 
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条 略 模 式 


俗话 说 ， 条 条 大 路 通 罗 马 。 在 美剧 《越狱 》 中 ， 主 角 Michael Scofield 就 设计 了 两 条 越狱 的 


道路 。 这 两 条 道路 都 可 以 到 达 靠 近 监 狱 外 墙 的 医务 室 。 


同样 ， 在 现实 中 ， 很 多 时 候 也 有 多 种 途径 到 达 同 一 个 目的 地 。 比 如 我 们 要 去 某 个 地 方 旅游 ， 


可 以 根据 具体 的 实际 情况 来 选择 出 行 的 线路 。 


口 如 果 没 有 时 间 但 是 不 在 乎 钱 ， 可 以 选择 坐 飞机 。 
口 如 果 没 有 钱 ， 可 以 选择 坐 大 巴 或 者 火车 。 
口 如 果 再 穷 一 点 ， 可 以 选择 骑 自 行车 。 


在 程序 设计 中 , 我 们 也 常常 遇 到 类 似 的 情况 , 要 实现 某 一 个 功能 有 多 种 方案 可 以 选择 。 比 如 


一 个 压缩 文件 的 程序 ， 既 可 以 选择 zip 算 法 ， 也 可 以 选择 gzip 算法 。 


这 些 算 法 灵活 多 样 ， 而 且 可 以 随意 互相 替换 。 这 种 解决 方案 就 是 本 章 将 要 介绍 的 策略 模式 。 
策略 模式 的 定义 是 : 定义 一 系列 的 算法 , 把 它们 一 个 个 封装 起 来 , 并 且 使 它们 可 以 相互 替换 。 
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5.1 使 用 策略 模式 计算 奖金 

策略 模式 有 着 广泛 的 应 用 。 本 节 我 们 就 以 年 终 奖 的 计算 为 例 进 行 介 绍 。 

很 多 公司 的 年 终 奖 是 根据 员工 的 工资 基数 和 年 底 绩效 情况 来 发 放 的 。 例 如 , 绩效 为 $ 的 人 年 
终 奖 有 4 倍 工资 , 绩效 为 A 的 人 年 终 奖 有 3 倍 工资 ,而 绩效 为 B 的 人 年 终 奖 是 2 倍 工资 。 假 设 财 
务 部 要 求 我 们 提供 一 段 代码 ， 来 方便 他 们 计算 员工 的 年 终 奖 。 

1. 最 初 的 代码 实现 

我 们 可 以 编写 一 个 名 为 calculateBonus 的 函数 来 计算 每 个 人 的 奖金 数额 。 很 显然 ， 


calculateBonus 消 数 要 正确 工作 ， 就 需要 接收 两 个 参数 : 员工 的 工资 数额 和 他 的 绩效 考核 等 级 。 
代码 如 下 : 


var calculateBonus = function( performanceLevel, salary ){ 


if ( performanceLevel === 'S' ){ 
return salary * 4; 
} 
if ( performanceLevel === 'A' ){ 
return salary * 3; 
} 
if ( performanceLevel === 'B' ){ 
return salary * 2; 
} 
}; 
calculateBonus( 'B', 20000 ); // 输出 : 40000 
calculateBonus( 'S', 6000 ); // 输出 : 24000 


可 以 发 现 ， 这 段 代码 十 分 简单 ， 但 是 存在 着 显而易见 的 缺点 。 
口 calculateBonus 函数 比较 庞大 ， 包 含 了 很 多 if-else 语句 ， 这 些 语句 需要 履 盖 所 有 的 人 逻辑 
分 支 。 
口 calculateBonus 函数 缺乏 弹性 ， 如 果 增 加 了 一 种 新 的 绩效 等 级 C， 或 者 想 把 绩效 S 的 奖金 
系数 改 为 5, 那 我 们 必须 深入 calculateBonus 函数 的 内 部 实现 , 这 是 违反 开放 -封闭 原则 的 。 
口 算法 的 复 用 性 差 ， 如 果 在 程序 的 其 他 地 方 需要 重用 这 些 计 算 奖 金 的 算法 呢 ? 我 们 的 选择 
只 有 复制 和 粘贴 。 

因此 ， 我 们 需要 重 构 这 段 代 码 。 

2. 使 用 组 合 函 数 重 构 代 码 

一 般 最 容易 想到 的 办 法 就 是 使 用 组 合 函 数 来 重 构 代 码 , 我 们 把 各 种 算法 封装 到 一 个 个 的 小 函 
数 里 面 ,这 些小 函数 有 着 良好 的 命名 ， 可 以 一 目 了 然 地 知道 它 对 应 着 哪 种 算法 ,它们 也 可 以 被 复 
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用 在 程序 的 其 他 地 方 。 代 码 如 下 : 


var performanceS = function( salary ){ 
return salary * 4; 


}; 


var performanceA = function( salary ){ 
return salary * 3; 


}; 


var performanceB = function( salary ){ 
return salary * 2; 


}; 
var calculateBonus = function( performanceLevel, salary ){ 


if ( performanceLevel === 'S' ){ 
return performanceS( salary ); 


} 


if ( performanceLevel === 'A' ){ 
return performanceA( salary ); 


} 


if ( performanceLevel === 'B' ){ 
return performanceB( salary ); 


} 
}; 


calculateBonus( 'A' , 10000 ); // 输出 : 30000 


目前 , 我 们 的 程序 得 到 了 一 定 的 改善 , 但 这 种 改善 非常 有 限 , 我 们 依然 没有 解决 最 重要 的 问 


3. 使 用 策略 模式 重 构 代码 
经 过 思考 , 我 们 想到 了 更 好 的 办 法 


: calculateBonus 国 数 有 可 能 越 来 越 庞 大 ， 而 且 在 系统 变化 的 时 候 缺 乏 弹 性 。 


使 用 策略 模式 来 重 构 代 码 。 策 略 模式 指 的 是 定义 一 系 


列 的 算法 ， 把 它们 一 个 个 封装 起 来 。 将 不 变 的 部 分 和 变化 的 部 分 隔 开 是 每 个 设计 模式 的 主题 , 策 
略 模式 也 不 例外 ， 策 略 模式 的 目的 就 是 将 算法 的 使 用 与 算法 的 实现 分 离开 来 。 
在 这 个 例子 里 , 算法 的 使 用 方式 是 不 变 的 ,都 是 根据 某 个 算法 取得 计算 后 的 奖金 数额 。 而 算 


法 的 实现 是 各 异 和 变化 的 ， 每 种 绩效 对 应 着 不 同 的 计算 规则 。 


把 请 求 委托 给 某 一 个 策略 类 。 要 做 到 这 点 ， 


一 个 基于 策略 模式 的 程序 至 少 由 两 部 分 组 成 。 第 一 个 部 分 是 一 组 策略 类 ,策略 类 封装 了 具体 
的 算法 ， 并 负责 具体 的 计算 过 程 。 第 二 个 部 分 是 环境 类 Context，Context 接受 客户 的 请 求 ， 随 后 


说 明 Context 中 要 维持 对 某 个 策略 对 象 的 引用 。 


现在 用 策略 模式 来 重 构 上 面 的 代码 。 第 一 个 版 本 是 模仿 传统 面向 对 象 语言 中 的 实现 。 我 们 先 
把 每 种 绩效 的 计算 规则 都 封装 在 对 应 的 策略 类 里 面 : 
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var performanceS = function(){}; 


performanceS.prototype.calculate = function( salary ){ 
return salary * 4; 


}; 
var performanceA = function(){}; 


performanceA.prototype.calculate = function( salary ){ 
return salary * 3; 


}; 
var performanceB = function(){}; 


performanceB.prototype.calculate = function( salary ){ 
return salary * 2; 


}; 
接 下 来 定义 奖金 类 Bonus: 
var Bonus = function(){ 
this.salary = null; // 原始 工资 
this.strategy = null; // 绩效 等 级 对 应 的 策略 对 象 
}; 


Bonus.prototype.setSalary = function( salary ){ 
this.salary = salary; ”// 设置 员工 的 原始 工资 
}; 
Bonus.prototype.setStrategy = function( strategy ){ 
this.strategy = strategy; ”// 设置 员工 绩效 等 级 对 应 的 策略 对 象 
}; 


Bonus.prototype.getBonus = function(){ // 取得 奖金 数额 

return this.strategy.calculate( this.salary );  ”// 把 计算 奖金 的 操作 委托 给 对 应 的 策略 对 象 
】 
在 完成 最 终 的 代码 之 前 ， 我 们 再 来 回顾 一 下 策略 模式 的 思想 : 

定义 一 系列 的 算法 ， 把 它们 一 个 个 封装 起 来 ， 并 且 使 它们 可 以 相互 替换 "。 

这 句 话 如 果 说 得 更 详细 一 点 ， 就 是 : 定义 一 系列 的 算法 ， 把 它们 各 自封 装 成 策略 类 ， 算 法 被 
封装 在 策略 类 内 部 的 方法 里 。 在 客户 对 Context 发 起 请 求 的 时 候 ，Context 总 是 把 请 求 委 托 给 这 些 
策略 对 象 中 间 的 某 一 个 进行 计算 。 

现在 我 们 来 完成 这 个 例子 中 剩 下 的 代码 。 先 创建 一 个 bonus 对 象 ， 并 且 给 bonus 对 象 设置 一 


@“ 并 且 使 它们 可 以 相互 替换 ”， 这 人 句 话 在 很 大 程度 上 是 相对 于 静态 类 型 语言 而 言 的 。 因 为 静态 类 型 语言 中 有 类 型 检 
查 机 制 ， 所 以 各 个 策略 类 需要 实现 同样 的 接口 。 当 它们 的 真正 类 型 被 隐藏 在 接口 后 面 时 ， 它 们 才能 被 相互 蔡 换 。 
而 在 JavaScript 这 种 “类 型 模糊 ”的 语言 中 没有 这 种 困扰 , 任何 对 象 都 可 以 被 替换 使 用 。 因 此 , JavaScript 中 的 “可 
以 相互 替换 使 用 ”表现 为 它们 具有 相同 的 目标 和 意图 。 


Hr 
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些 原 始 的 数据 ， 比 如 员工 的 原始 工资 数额 。 接 下 来 把 某 个 计算 奖金 的 策略 对 象 也 传人 bonus 对 象 
内 部 保存 起 来 。 当 调 用 bonus.getBonus() 来 计算 奖金 的 时 候 , bonus 对 象 本 身 并 没有 能 力 进行 计算 ， 
而 是 把 请 求 委 托 给 了 之 前 保存 好 的 策略 对 象 : 


var bonus = new Bonus(); 


bonus.setSalary( 10000 ); 
bonus.setStrategy( new performanceS() ); // 设置 策略 对 象 


console.1og( bonus.getBonus() ); // 输出 : 40000 


bonus.setStrategy( new performanceA() ); // 设置 策略 对 象 
console.1og( bonus.getBonus() ); // 输出 : 30000 


刚刚 我 们 用 策略 模式 重 构 了 这 段 计算 年 终 奖 的 代码 , 可 以 看 到 通过 策略 模式 重 构 之 后 , 代码 
变 得 更 加 清晰 ， 各 个 类 的 职责 更 加 鲜明 。 但 这 段 代码 是 基于 传统 面向 对 象 语言 的 模仿 ， 下 一 节 我 
们 将 了 解 用 JavaScript 实现 的 策略 模式 。 


5.2 ” JavaScript 版 本 的 策略 模式 


在 5.1 节 中 , 我 们 让 strategy 对 象 从 各 个 策略 类 中 创建 而 来 ， 这 是 模拟 一 些 传 统 面 向 对 象 语 
言 的 实现 。 实 际 上 在 JavaScript 语言 中 ， 函 数 也 是 对 象 ， 所 以 更 简单 和 直接 的 做 法 是 把 strategy 
直接 定义 为 函数 : 


var strategies = { 

"S": function( salary ){ 
return salary * 4; 

}, 

"A": function( salary ){ 
return salary * 3; 

}), 

"B": function( salary ){ 
return salary * 2; 


} 


}; 


同样 ，Context 也 没有 必要 必须 用 Bonus 类 来 表示 ， 我 们 依然 用 calculateBonus 函数 充当 
Context 来 接受 用 户 的 请 求 。 经 过 改造 ， 代 码 的 结构 变 得 更 加 简洁 : 


var strategies = { 
"S": function( salary ){ 
return salary * 4; 
}, 
"A": function( salary ){ 
return salary * 3; 
用 
"B": function( salary ){ 
return salary * 2; 
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站 ; 


var calculateBonus = function( level, salary ){ 
return strategies[ level ]( salary ); 


console.log( calculateBonus( 'S', 20000 ) ); // 输出 : 80000 
console.log( calculateBonus( 'A', 10000 ) ); // 输出 : 30000 


在 接 下 来 的 缓 动 动画 和 表单 验证 的 例子 中 ， 我 们 用 到 的 都 是 这 种 函数 形式 的 策略 对 象 。 


5.3 多 态 在 策略 模式 中 的 体现 


通过 使 用 策略 模式 重 构 代码 , 我 们 消除 了 原 程序 中 大 片 的 条 件 分 支 语句 。 所 有 跟 计 算 奖金 有 
关 的 逻辑 不 再 放 在 Context 中 ， 而 是 分 布 在 各 个 策略 对 象 中 。Context 并 没有 计算 奖金 的 能 力 ， 而 
是 把 这 个 职责 委托 给 了 某 个 策略 对 象 。 每 个 策略 对 象 负责 的 算法 已 被 各 自封 装 在 对 象 内 部 。 当 我 
们 对 这 些 策略 对 象 发 出 “计算 奖金 ”的 请 求 时 ,它们 会 返回 各 自 不 同 的 计算 结果 ,这 正 是 对 象 多 
态 性 的 体现 ， 也 是 “它们 可 以 相互 替换 ”的 目的 。 替 换 Context 中 当前 保存 的 策略 对 象 ， 便 能 执 
行 不 同 的 算法 来 得 到 我 们 想 要 的 结 


5.4 ”使 用 策略 模式 实现 缓 动 动画 


如 果 让 一 些 不 太 了 解 前 端 开 发 的 程序 员 来 投票 , 选 出 他 们 眼中 JavaScript 语言 在 Web 开发 中 

的 两 大 用 途 ， 我 想 结果 很 有 可 能 是 这 样 的 : 

口 编写 一 些 让 div 飞 来 飞 去 的 动画 

口 验证 表单 

虽然 这 只 是 一 句 玩 笑话 ， 但 从 中 可 以 看 到 动画 在 Web 前 端 开发 中 的 地 位 。 一 些 别 出 心 裁 的 
动画 效果 可 以 让 网 站 增色 不 少 。 

有 一 段 时 间 网 页 游戏 非常 流行 , HTMLS5 版 本 的 游戏 可 以 达到 不 逊 于 Flash 游戏 的 效果 。 我 曾 
经 编写 过 HTMLS5 版 本 的 街头 霸王 游戏 ， 让 游戏 的 主角 跳跃 或 是 移动 ， 实 际 上 只 是 让 这 个 div 按 
照 一 定 的 缓 动 算 法 进行 运动 而 已 。 

如 果 我 们 明白 了 怎样 让 一 个 小 球 运动 起 来 , 那么 离 编 写 一 个 完整 的 游戏 就 不 遥远 了 , 剩 下 的 
只 是 一 些 把 逻辑 组 织 起 来 的 体力 活 。 本 节 并 不 会 从 头 到 尾 地 编写 一 个 完整 的 游戏 , 我 们 首先 要 做 
的 是 让 一 个 小 球 按照 不 同 的 算法 进行 运动 。 


5.4.1 ”实现 动画 效果 的 原理 
用 JavaScript 实现 动画 效果 的 原理 跟 动画 片 的 制作 一 样 ， 动 画 片 是 把 一 些 差 距 不 大 的 原画 以 
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较 快 的 帧 数 播放 , 来 达到 视觉 上 的 动画 效果 。 在 JavaScript 中 , 可 以 通过 连续 改变 元 素 的 某 个 CSS 


发 性 ， 比 如 left 、top 、background-position 来 实现 动画 效果 。 图 5-1 就 是 通过 改变 节点 的 
background-position， 让 人 物 动 起 来 的 。 
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5.4.2 思路 和 一 些 准 备 工作 
我 们 目标 是 编写 一 个 动画 类 和 一 些 缓 动 算法 ， 让 小 球 以 各 种 各 样 的 组 动 效 果 在 页 面 中 和 运动。 
现在 来 分 析 实 现 这 个 程序 的 思路 。 在 运动 开始 之 前 , 需要 提前 记录 一 些 有 用 的 信息 ,至 少 包 
括 以 下 信息 : 
口 动画 开始 时 ， 小 球 所 在 的 原始 位 置 ; 
口 小 球 移 动 的 目标 位 置 ; 
口 动画 开始 时 的 准确 时 间 点 ; 
口 小 球 运 动 持 续 的 时 间 。 
随后 ,我 们 会 用 setInterval 创建 一 个 定时 器 ,定时 需 每 隔 19ms 循环 一 次 。 在 定时 器 的 每 一 
帧 里 , 我 们 会 把 动画 已 消耗 的 时 间 、 小 球 原始 位 置 、 小 球 目 标 位 置 和 动画 持续 的 总 时 间 等 信息 传 
人 组 动 算法 。 该 算法 会 通过 这 几 个 参数 ， 计 算出 小 球 当 前 应 该 所 在 的 位 置 。 最 后 再 更 新 该 div 对 
应 的 CSS 属性 ， 小 球 就 能 够 顺利 地 运动 起 来 了 。 


5.4.3 ”让 小 球 运动 起 来 


在 实现 完整 的 功能 之 前 ， 我 们 先 了 解 一 些 常 见 的 缓 动 算法 ， 这 些 算法 最 初 来 自 Flash， 但 可 
以 非常 方便 地 移植 到 其 他 语言 中 。 

这 些 算 法 都 接受 4 个 参数 ,这 4 个 参数 的 含义 分 别 是 动画 已 消耗 的 时 间 、 小 球 原 始 位 置 、 小 
球 目标 位 置 、 动 画 持 续 的 总 时 间 ， 返 回 的 值 则 是 动画 元 素 应 该 处 在 的 当前 位 置 。 代 码 如 下 : 

var tween = { 


linear: function( t, b, c, d ){ 
return c*t/d + b; 


}), 

easeIn: function( t, b, c, d ){ 
returnc*(t/=d)*t+b; 

}), 
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strongEaseIn: function(t, b, c, d){ 
returnc*(t/=d)*t*t*t*t+b; 

}), 

strongEaseOut: function(t, b, c, d){ 
returnc*((t=t/d-1)*t*t*t*t+1)+b; 

}), 

sineaseIn: function( t, b, c, d ){ 
Teturn c*(t/=d)*t*t+b; 

}), 


sineaseOut: function(t,b,c,d){ 
returnc*((t=t/d-1)*t*t+1)+b; 
} 


}; 

现在 我 们 开始 编写 完整 的 代码 ， 下 面 代码 的 思想 来 自 jQuery 库 ， 由 于 本 节 的 目标 是 演示 策 
略 模式 ， 而 非 编 写 一 个 完整 的 动画 库 ， 因 此 我 们 省 去 了 动画 的 队列 控制 等 更 多 完整 功能 。 

现在 进入 代码 实现 阶段 ， 首 先 在 页 面 中 放置 一 个 div: 

<body> 


<div style="position:absolute;background:blue”id="div"> 我 是 div</div> 
</body> 


接 下 来 定义 Animate 类 ,Animate 的 构造 函数 接受 一 个 参数 :即将 运动 起 来 的 dom 节点 -Animate 
类 的 代码 如 下 : 


var Animate = function( dom ){ 


this.dom = dom; // 进行 运动 的 dom 节点 

this.startTime = 0; // 动画 开始 时 间 

this.startPos = 0; // 动画 开始 时 ，dom 节点 的 位 置 ， 即 dom 的 初始 位 置 
this.endpPos = 0; // 动画 结束 时 ，dom 节点 的 位 置 ， 即 dom 的 目标 位 置 
this.propertyName = null; // dom 节点 需要 被 改变 的 css 属性 名 

this.easing = null; // 缓 动 算法 

this.duration = null; // 动画 持续 时 间 


} 


接 下 来 Animate.prototype.start 方法 负责 启动 这 个 动画 ， 在 动画 被 启动 的 瞬间 ， 要 记录 一 些 
言 息 ， 供 缓 动 算法 在 以 后 计算 小 球 当前 位 置 的 时 候 使 用 。 在 记录 完 这 些 信息 之 后 ,此 方法 还 要 负 
责 启动 定时 器 。 代 码 如 下 : 


Animate.prototype.start = function( propertyName, endPos, duration, easing ){ 
this.startTime = +new Date; // 动画 启动 时 间 
this.startPos = this.dom.getBoundingClientRect()[ propertyName ]; // dom 节点 初始 位 置 
this.propertyName = propertyName; // dom 节点 需要 被 改变 的 CSS 属性 名 
this.endPos = endPos; // dom 节点 目标 位 置 
this.duration = duration;  ”// 动画 持续 事件 
this.easing = tween[ easing ]; // 缓 动 算法 


var self = this; 


var timeId = setInterval(function(){ // 启动 定时 器 ， 开 始 执 行动 画 
if ( self.step() === false ){ // 如 果 动 画 已 结束 ， 则 清除 定时 器 


clearInterval( timeId ); 
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}, 19 ); 
}; 


Animate.prototype.start 方法 接受 以 下 4 个 参数 。 
口 propertyName: 要 改变 的 CSS 属性 名 ,比如 "left' 、'top', 分别 表示 左右 移动 和 上 下 移动 。 
口 endPos: 小 球 运 动 的 目标 位 置 。 
口 duration: 动画 持续 时 间 。 
D easing: 组 动 算 法 。 

再 接 下 来 是 Animate.prototype.step 方法 ， 该 方法 代表 小 球 运 动 的 每 一 帧 要 做 的 事情 。 在 此 
处 ， 这 个 方法 负责 计算 小 球 的 当前 位 置 和 调用 更 新 CSS 属性 值 的 方法 Animate.prototype.update。 
代码 如 下 : 


Animate.prototype.step = function(){ 


var t = +new Date; // 取得 当前 时 间 
if ( t >= this.startTime + this.duration ){ // (1) 


this.update( this.endPos );  // 更 新 小 球 的 CS5 属性 值 
return false; 


} 
var pos = this.easing( t - this.startTime, this.startPos, 
this.endPos - this.startPos, this.duration ); 
// pos 为 小 球 当 前 位 置 
this.update( pos ); // 更 新 小 球 的 C55 属性 值 
}; 
在 这 段 代 码 中 , (1) 处 的 意思 是 , 如 果 当 前 时 间 大 于 动画 开始 时 间 加 上 动画 持续 时 间 之 和 , 说 
明 动 画 已 经 结束 ， 此 时 要 修正 小 球 的 位 置 。 因 为 在 这 一 帧 开始 之 后 ,小 球 的 位 置 已 经 接近 了 目标 
位 置 ， 但 很 可 能 不 完全 等 于 目标 位 置 。 此 时 我 们 要 主动 修正 小 球 的 当前 位 置 为 最 终 的 目标 位 置 。 
此 外 让 Animate.prototype.step 方法 返回 false， 可 以 通知 Animate.prototype.start 方法 清除 定 
时 笑 。 


最 后 是 负责 更 新 小 球 CSS 属性 值 的 Animate.prototype.update 方法 : 


Animate.prototype.update = function( pos ){ 
this.dom.style[ this.propertyName ] = pos + 'px'; 


如 果 不 嫌 麻 烦 ， 我 们 可 以 进行 一 些小 小 的 测试 : 


var div = document.getElementById( 'div' ); 
var animate = new Animate( div ); 


animate.start( 'left', 500, 1000, 'strongEaseOut' ); 
// animate.start( 'top', 1500, 500, 'strongEaseIn' ); 


通过 这 段 代 码 ， 可 以 看 到 小 球 按照 我 们 的 期 望 以 各 种 各 样 的 缓 动 算法 在 页 面 中 运动 。 
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本 节 我 们 学 会 了 怎样 编写 一 个 动画 类 , 利用 这 个 动画 类 和 一 些 缓 动 算法 就 可 以 让 小 球 运动 起 
来 。 我 们 使 用 策略 模式 把 算法 传人 动画 类 中 , 来 达到 各 种 不 同 的 缓 动 效果 ,这些 算法 都 可 以 轻易 
地 被 蔡 换 为 另外 一 个 算法 ,这 是 策略 模式 的 经 典 运用 之 一 。 策 略 模式 的 实现 并 不 复杂 ,关键 是 如 
何 从 策略 模式 的 实现 背后 ， 找 到 封装 变化 、 委 托 和 多 态 性 这 些 思想 的 价值 。 


5.5 更 广义 的 “算法 ” 


策略 模式 指 的 是 定义 一 系列 的 算法 , 并 且 把 它们 封装 起 来 。 本 章 我 们 介绍 的 计算 奖金 和 缓 动 
动画 的 例子 都 封装 了 一 些 算法 。 

从 定义 上 看 ， 策 略 模式 就 是 用 来 封装 算法 的 。 但 如 果 把 策略 模式 仅仅 用 来 封装 算法 ,未 免 有 
一 点 大 材 小 用 。 在 实际 开发 中 , 我 们 通常 会 把 算法 的 含义 扩散 开 来 ,使 策略 模式 也 可 以 用 来 封装 
一 系列 的 “业务 规则 ”。 只 要 这 些 业 务 规则 指向 的 目标 一 致 ， 并 且 可 以 被 蔡 换 使 用 ， 我 们 就 可 以 
用 策略 模式 来 封装 它们 。 

GoF 在 《设计 模式 ;一 书 中 提 到 了 一 个 利用 策略 模式 来 校 验 用 户 是 否 输入 了 合法 数据 的 例子 ， 
但 GoF 未 给 出 具体 的 实现 。 刚 好 在 Web 开发 中 ， 表 单 校 验 是 一 个 非常 常见 的 话题 。 下 面 我 们 就 
看 一 个 使 用 策略 模式 来 完成 表单 校 验 的 例子 。 


5.6 表单 校 验 


在 一 个 Web 项目 中 ,， 注册、 登录 、 修 改 用 户 信息 等 功能 的 实现 都 离 不 开 提交 表单 。 
在 将 用 户 输入 的 数据 交 给 后 台 之 前 , 常常 要 做 一 些 客户 端 力所能及 的 校 验 工作 ,比如 注册 的 
时 候 需 要 校 验 是 否 填写 了 用 户 名 ， 密 码 的 长 度 是 否 符合 规定 ,等 等 。 这 样 可 以 避免 因为 提交 不 合 
法 数据 而 带 来 的 不 必要 网 络 开销 。 
假设 我 们 正在 编写 一 个 注册 的 页 面 ， 在 点 击 注册 按钮 之 前 ， 有 如 下 几 条 校 验 逻 辑 。 
口 用 户 名 不 能 为 空 。 
口 密码 长 度 不 能 少 于 6 位 。 
口 手机 号 码 必须 符合 格式 。 


5.6.1 表单 校 验 的 第 一 个 版 本 


现在 编写 表单 校 验 的 第 一 个 版 本 ,可 以 提前 透露 的 是 ,目前 我 们 还 没有 引入 策略 模式 。 代 码 
如 下 : 


<html> 
<body> 
<form action="http:// xxx.com/register" id="registerForm" method="post"> 
请 输入 用 户 名 : xinput type="text" name="userName"/ > 
请 输入 密码 : xinput type="text" name="password"/ > 
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请 输入 手机 号 码 : xinput type="text" name="phoneNumber"/ > 
ons en 
</form> 
<script> 
var registerForm = document.getElementById( 'registerForm' ); 


registerForm.onsubmit = function(){ 
if ( registerForm.userName.value === ''" ){ 
alert (“' 用 户 名 不 能 为 空 ' 
return false; 


lL 


if ( registerForm.password.value.length < 6 ){ 
alert (“' 密 码 长 度 不 能 少 于 6 位 ' ); 
return false; 


} 
if ( 1!/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){ 
alert ( “手机 号 码 格式 不 正确 ” ); 
return false; 
} 
} 
</script> 
</body> 
</html> 


这 是 一 种 很 常见 的 代码 编写 方式 ， 它 的 缺点 跟 计算 奖金 的 最 初版 本 一 模 一 样 。 
口 registerForm.onsubmit 函数 比较 庞大 ， 包 含 了 很 多 if-else 语句 ， 这 些 语句 需要 覆盖 所 有 
的 校 验 规则 。 
口 registerForm.onsubmit 函数 缺乏 弹性 ， 如 果 增 加 了 一 种 新 的 校 验 规 则 ， 或 者 氏 es 
度 校 验 从 6 改 成 8, 我 们 都 必须 深入 registerForm.onsubmit 函数 的 内 部 实现 ， 这 是 违反 开 
放 - 封 闭 原则 的 。 
口 算法 的 复 用 性 差 ， 如 果 在 程序 中 增加 了 另外 一 个 表单 ， 这 个 表单 也 需要 进行 一 些 类 似 的 
校 验 ， 那 我 们 很 可 能 将 这 些 校 验 逻辑 复制 得 漫天 遍野 。 


5.6.2 ”用 策略 模式 重 构 表单 校 验 


下 面 我 们 将 用 策略 模式 来 重 构 表单 校 验 的 代码 , 很 显然 第 一 步 我 们 要 把 这 些 校 验 逻辑 都 封装 
成 策略 对 象 


var strategies = { 
isNonEmpty: function( value, errorMsg ){ // 不 为 空 
if ( value === ''" ){ 
return errorMsg ; 


} 


}, 
minLength: function( value, length, errorMsg ){ // 限制 最 小 长 度 
if ( value.length < length ){ 
return errorMsg; 
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)， 
isMobile: function( value, errorMsg ){ // 手机 号 码 格式 


if ( 1/(^1[3|5|8][0-9]{9}$)/.test( value ) ){ 
return errorMsg; 
} 


} 
接 下 来 我 们 准备 实现 Validator 类 。Validator 类 在 这 里 作为 Context， 人 负责 接 收 用 户 的 请 求 
并 委托 给 strategy 对 象 ,在 给 出 Validator 类 的 代码 之 前 ,有 必要 提前 了 解 用 户 是 如 何 向 Validator 
类 发 送 请 求 的 ， 这 有 助 于 我 们 知道 如 何 去 编 写 Validator 类 的 代码 。 代 码 如 下 : 


var validataFunc = function(){ 
var validator = new Validator(); // 创建 一 个 validator 对 象 


validator.add( registerForm.userName，'isNonEmpty'，' 用 户 名 不 能 为 空 ' 
validator.add( registerForm.password,，'minLength:6'，' 密码 长 度 不 能 少 于 6 位 ' ); 
validator.add( registerForm.phoneNumber，'isMobile'，' 手 机 号 码 格式 不 正确 ' ); 


var errorMsg = validator.start(); // 获得 校 验 结果 
return errorMsg; // 返回 校 验 结果 


} 


var registerForm = document.getElementById( 'registerForm' ); 
registerForm.onsubmit = function(){ 
var errorMsg = validataFunc();  // 如 果 errorMsg 有 确切 的 返回 值 ， 说 明 未 通过 校 验 
if ( errorMsg ){ 
alert ( errorMsg ); 
return false; // 阻止 表单 提交 


}; 


从 这 段 代 码 中 可 以 看 到 ， 我 们 先 创 建 了 一 个 validator 对 象 ， 然 后 通过 validator.add 方法 ， 
往 validator 对 象 中 添加 一 些 校 验 规则 。validator.add 方法 接受 3 个 参数 ,以 下 面 这 句 代 码 说 明 : 


validator.add( registerForm.password,，'minLength:6'，' 密码 长 度 不 能 少 于 6 位 ' ); 


口 registerForm.password 为 参与 校 验 的 input 输入 框 。 
口 'minLength:6' 是 一 个 以 冒号 隔 开 的 字符 串 。 冒 号 前 面 的 minLength 代 表 客户 挑选 的 strategy 
对 象 , 冒号 后 面 的 数字 6 表示 在 校 验 过 程 中 所 必需 的 一 些 参数 。'minLength:6' 的 意思 就 是 
校 验 registerForm.password 这 个 文本 输入 框 的 value 最 小 长 度 为 6。 如 果 这 个 字符 串 中 不 
包含 冒号 ， 说明 校 验 过 程 中 不 需要 额外 的 参数 信息 ， 比 如 'isNonEmpty'。 
口 第 3 个 参数 是 当 校 验 未 通过 时 返回 的 错误 信息 。 
当 我 们 往 validator 对 象 里 添加 完 一 系列 的 校 验 规则 之 后 ， 会 调用 validator.start() 方 法 来 
启动 校 验 。 如 果 validator.start() 返 回 了 一 个 确切 的 errorMsg 字符 串 当 作 返回 值 , 说 明 该 次 校 验 
没有 通过 ， 此 时 需 让 registerForm.onsubmit 方法 返回 false 来 阻止 表单 的 提交 。 


出 
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最 后 是 Validator 类 的 实现 : 


var Validator = function(){ 
this.cache = []; // 保存 校 验 规则 


了 


Validator.prototype.add = function( dom, rule, errorMsg ){ 
var ary = rule.split( ':'" ); // 把 strategy 和 参数 分 开 
this.cache.push(function(){ // 把 校 验 的 步骤 用 空 函 数 包 装 起 来 ， 并 且 放 入 cache 
var strategy = ary.shift(); // 用 户 挑选 的 strategy 
ary.unshift( dom.value ); // 把 input 的 value 添加 进 参数 列表 
ary.push( errorMsg ); // 把 errorMsg 添加 进 参 数列 表 
return strategies[ strategy ].apply( dom, ary ); 
}); 
}; 


Validator.prototype.start = function(){ 
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){ 
var msg = validatorFunc(); // 开始 校 验 ， 并 取得 校 验 后 的 返回 信息 
if ( msg ){ // 如 果 有 确切 的 返回 值 ， 说 明 校 验 没有 通过 
return msg; 
} 
} 
}; 
使 用 策略 模式 重 构 代 码 之 后 ， 我 们 仅仅 通过 “配置 ”的 方式 就 可 以 完成 一 个 表单 的 校 验 ， 
这 些 校 验 规则 也 可 以 复 用 在 程序 的 任何 地 方 ， 还 能 作为 插件 的 形式 ， 方 便 地 被 移植 到 其 他 项 
目 中 。 
在 修改 某 个 校 验 规 则 的 时 候 ， 只 需要 编写 或 者 改写 少量 的 代码 。 比 如 我 们 想 将 用 户 名 输入 
的 校 验 规 则 改 成 用 户 名 不 能 少 于 4 个 字符 。 可 以 看 到 ， 这 时 候 的 修改 是 毫 不 费力 的 。 代 码 如 下 : 


validator.add( TegisterForm.uUserName， "isNonEmpty" ， "用 户 名 不 能 为 空 ”); 


HH 


// 政 成 : 
validator.add( registerForm.userName，'minLength:10'，' 用 户 名 长 度 不 能 小 于 10 位 ' ); 


5.6.3 ”给 某 个 文本 输入 框 添加 多 种 校 验 规则 

为 了 让 读者 把 注意 力 放 在 策略 模式 的 使 用 上 ,目前 我 们 的 表单 校 验 实 现 留 有 一 点 小 遗憾 : 一 
个 文本 输入 框 只 能 对 应 一 种 校 验 规则 ， 比 如 ， 用 户 名 输入 框 只 能 校 验 输入 是 否 为 空 : 

validator.add( registerForm.userName，'isNonEmpty'，' 用 户 名 不 能 为 空 ); 

如 果 我 们 既 想 校 验 它 是 否 为 空 ， 又 想 校 验 它 输 入 文本 的 长 度 不 小 于 10 呢 ? 我 们 期 望 以 这 样 
的 形式 进行 校 验 : 


validator.add( registerForm.userName, [{ 
strategy: 'isNonEmpty', 
errorMsg: “用 户 名 不 能 为 空 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


84 第 5 章 策略 模式 


strategy: 'minLength:6', 
errorMsg: “用 户 名 长 度 不 能 小 于 10 位 ' 


}] ); 
下 面 提供 的 代码 可 用 于 一 个 文本 输入 框 对 应 多 种 校 验 规则 : 
<html> 

<body> 


<form action="http:// xxx.com/register" id="registerForm" method="post"> 
请 输入 用 户 名 : <input type="text" name="userName"/ > 
请 输入 密码 : xinput type="text" name="password"/ > 
请 输入 手机 号 码 : <input type="text" name="phoneNumber"/ > 
《<button> 提 交 </button> 
</form> 
<script> 


/六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 站 六 米 策 略 对 多 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 


var strategies = { 
isNonEmpty: function( value, errorMsg ){ 
if ( value === ''" ){ 
return errorMsg; 
} 


} 


minLength: function( value, length, errorMsg ){ 
if ( value.length < length ){ 
return errorMsg; 
} 


}, 


isMobile: function( value, errorMsg ){ 
if ( I!/(^1[3|5|8][0-9]{9}$)/.test( value ) ){ 
return errorMsg; 
} 


} 
3 


ahhh ht ht nistsiob thd tinta -NW Es- ep 类 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 了/ 


var Validator = function(){ 
this.cache = []; 


}; 
Validator.prototype.add = function( dom, rules ){ 
var self = this; 
for ( var i = 0, rule; rule = rules[ i++ ]; ){ 
(function( rule ){ 
var strategyAry = rule.strategy.split( ':' ); 


var errorMsg = rule.errorMsg; 


self.cache.push(function(){ 
var strategy = strategyAry.shift(); 
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strategyAry.unshift( dom.value ); 
strategyAry.push( errorMsg ); 
return strategies[ strategy ].apply( dom, strategyAry ); 


}); 
D( rule ) 


二 


Validator.prototype.start = function(){ 
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){ 
var errorMsg = validatorFunc(); 
if ( errorMsg ){ 
return errorMsg; 
} 


} 
1 


var registerForm = document.getElementById( 'registerForm' ); 


var validataFunc = function(){ 
var validator = new Validator(); 


validator.add( registerForm.userName, [{ 
strategy: “isNonEmpty ， 
errorMsg: “用 户 名 不 能 为 空 
}, { 
strategy: 'minLength:6', 
errorMsg: “用 户 名 长 度 不 能 小 于 10 位 ' 
]]); 


validator.add( registerForm.password, [{ 
strategy: 'minLength:6', 
errorMsg: “密码 长 度 不 能 小 于 6 位 ' 
}]); 


validator.add( registerForm.phoneNumber, [{ 
strategy: 'isMobile', 
errorMsg: ' 手 机 号 码 格 式 不 正确 ' 

}]); 


var errorMsg = validator.start(); 
return errorMsg; 


} 


registerForm.onsubmit = function(){ 
var errorMsg = validataFunc(); 


if ( errorMsg ){ 
alert ( errorMsg ); 
return false; 
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</ScITipt> 
</body> 
</htm]> 


5.7 ”策略 模式 的 优 缺 点 


策略 模式 是 一 种 常用 上 且 有 效 的 设计 模式 ， 本 章 提供 了 计算 奖金 、 缓 动 动画 、 表 单 校 验 这 三 个 
例子 来 加 深 大 家 对 策略 模式 的 理解 。 从 这 三 个 例子 中 ， 我 们 可 以 总 结 出 策略 模式 的 一 些 优点 。 
口 策略 模式 利用 组 合 、 委 托 和 多 态 等 技术 和 思想 ， 可 以 有 效 地 避免 多 重 条 件 选 择 语 句 。 

口 策略 模式 提供 了 对 开放 -封闭 原则 的 完美 支持 ,将 算法 封装 在 独立 的 strategy 中 ,使 得 它 

们 易于 切换 ， 易 于 理解 ， 易 于 扩展 。 

口 策略 模式 中 的 算法 也 可 以 复 用 在 系统 的 其 他 地 方 ， 从 而 避免 许多 重复 的 复制 粘贴 工作 。 

口 在 策略 模式 中 利用 组 合 和 委托 来 让 Context 拥有 执行 算法 的 能 力 , 这 也 是 继承 的 一 种 更 轻 
便 的 替代 方案 。 

当然 ， 策 略 模式 也 有 一 些 缺 点 ， 但 这 些 缺 点 并 不 严重 。 

首先 , 使 用 策略 模式 会 在 程序 中 增加 许多 策略 类 或 者 策略 对 象 , 但 实际 上 这 比 把 它们 负责 的 
逻辑 堆砌 在 Context 中 要 好 。 

其 次 ， 要 使 用 策略 模式 ， 必 须 了 解 所 有 的 strategy， 必 须 了 解 各 个 strategy 之 间 的 不 同 点 ， 
这 样 才能 选择 一 个 合适 的 strategy。 比 如 ， 我 们 要 选择 一 种 合适 的 旅游 出 行路 线 ， 必 须 先 了 解 选 
择 飞 机 、 火 车 、 自 行车 等 方案 的 细节 。 此 时 strategy 要 向 客户 暴露 它 的 所 有 实现 , 这 是 违反 最 少 
知识 原则 的 。 


5.8 一 等 函数 对 象 与 策略 模式 


本 章 提供 的 几 个 策略 模式 示例 ， 既 有 模拟 传统 面向 对 象 语言 的 版 本 ， 也 有 针对 JavaScript 语 
言 的 特有 实现 。 在 以 类 为 中 心 的 传统 面向 对 象 语 言 中 , 不 同 的 算法 或 者 行为 被 封装 在 各 个 策略 类 
中 ，Context 将 请 求 委托 给 这 些 策略 对 象 ， 这 些 策略 对 象 会 根据 请 求 返回 不 同 的 执行 结果 ， 这 样 
便 能 表现 出 对 象 的 多 态 性 。 

Peter Norvig 在 他 的 演讲 中 曾 说 过 :“ 在 函数 作为 一 等 对 象 的 语言 中 ， 策 略 模式 是 隐形 的 。 
strategy 就 是 值 为 函数 的 变量 。 ”在 JavaScript 中 ,除了 使 用 类 来 封装 算法 和 行为 之 外 ,使 用 函数 
当然 也 是 一 种 选择 。 这 些 “ 算 法 ”可 以 被 封装 到 函数 中 并 且 四 处 传递 ， 也 就 是 我 们 常 说 的 “高 阶 
函数 ”。 实际 上 在 JavaScript 这 种 将 函数 作为 一 等 对 象 的 话 言 里 , 策略 模式 已 经 融入 到 了 语言 本 身 
当中 , 我 们 经 常用 高 阶 函数 来 封装 不 同 的 行为 , 并 且 把 它 传递 到 另 一 个 函数 中 。 当 我 们 对 这 些 函 
数 发 出 “调用 ”的 消息 时 , 不 同 的 函数 会 返回 不 同 的 执行 结果 。 在 JavaScript 中 ,“ 丽 数 对 象 的 多 
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态 性 ”来 得 更 加 简单 。 
在 前 面 的 学 习 中 ,为 了 清楚 地 表示 这 是 一 个 策略 模式 , 我们 特意 使 用 了 strategies 这 个 名 字 。 
如 果 去 掉 strategies， 我 们 还 能 认 出 这 是 一 个 策略 模式 的 实现 吗 ? 代码 如 下 : 


var S = function( salary ){ 
return salary * 4; 


外 


var A = function( salary ){ 
return salary * 3; 


}; 


var B = function( salary ){ 
return salary * 2; 


}; 


var calculateBonus = function( func, salary ){ 
return func( salary ); 


}; 


calculateBonus( S$S, 10000 ); // 输出 : 40000 


5.9 小 结 


本 章 我 们 既 提 供 了 接近 传统 面向 对 象 语言 的 策略 模式 实现 ， 也 提供 了 更 适合 JavaScript 语言 
的 策略 模式 版 本 。 在 JavaScript 语 言 的 策略 模式 中 ， 策 略 类 往往 被 本 数 所 代替 ， 这 时 策略 模式 就 
成 为 一 种 “隐形 ”的 模式 。 尽 管 这 样 ， 从 头 到 尾 地 了 解 策略 模式 ， 不 仅 可 以 让 我 们 对 该 模式 有 更 
加 透彻 的 了 解 ， 也 可 以 使 我 们 明白 使 用 函数 的 好 处 。 
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6 章 


代理 模式 


有 经 


代理 模式 是 为 一 个 对 象 提供 一 个 代用 品 或 占 位 符 ， 以 便 控 制 对 它 的 访问 。 


代理 模式 是 一 种 非常 有 意义 的 模式 , 在 生活 中 可 以 找到 很 多 代理 模式 的 场景 。 比 如 ， 明 星 都 
纪 人 作为 代理 。 如 果 想 请 明星 来 办 一 场 商 业 演出 ,只 能 联系 他 的 经 纪 人 。 经 纪 人 会 把 商业 演 


出 的 细节 和 报酬 都 谈 好 之 后 ， 再 把 合同 交 给 明星 签 。 


代理 模式 的 关键 是 ， 当 客户 不 方便 直接 访问 一 个 对 象 或 者 不 满足 需要 的 时 候 , 提供 一 个 替身 


对 象 来 控制 对 这 个 对 象 的 访问 , 客户 实际 上 访问 的 是 蔡 身 对 象 。 蔡 身 对 象 对 请 求 做 出 一 些 处 理 之 


后 ， 


6.1 


再 把 请 求 转 交 给 本 体 对 象 。 如 图 6-1 和 图 6-2 所 示 。 


(er )—( + ) 


图 6-1 不 用 代理 模式 


图 6-2 ”使 用 代理 模式 
下 面 我 们 通过 几 个 例子 来 详细 说 明 。 


第 一 个 例子 一 一 小 明 追 MM 的 故事 


下 面 我 们 从 一 个 小 例子 开始 熟悉 代理 模式 的 结构 。 
在 四 月 一 个 晴朗 的 早晨 ,小 明 遇 见 了 他 的 百 分 百 女孩 , 我 们 暂且 称呼 小 明 的 女神 为 
A。 两 天 之 后 ,小 明 决 定 给 A 送 一 束 花 来 表白 。 刚好 小 明 打 听 到 A 和 他 有 一 个 共同 的 朋 
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友 B， 于 是 内 向 的 小 明 决 定 让 B 来 代替 自己 完成 送 花 这 件 事情 。 


虽然 小 明 的 故事 必然 以 悲剧 收场 ， 因 为 追 MM 更 好 的 方式 是 送 一 辆 宝马 。 不 管 怎样 ， 我 们 
还 是 先 用 代码 来 描述 一 下 小 明 追 女神 的 过 程 ， 先 看 看 不 用 代理 模式 的 情况 : 


var Flower = function(){}; 


var xiaoming = { 
sendFlower: function( target ){ 
var flower = new Flower(); 
target.receiveFlower( flower ); 


} 
}; 
var A = { 
receiveFlower: function( flower ){ 
console.log(“' 收 到 花 ' + flower ); 
} 
}; 


xiaoming.sendFlower( A ); 


接 下 来 ,我 们 引入 代理 B， 即 小 明 通 过 B 来 给 A 送 花 : 


var Flower = function(){}; 


var xiaoming = { 
sendFlower: function( target){ 
var flower = new Flower(); 
target.receiveFlower( flower ); 
} 


}; 
var B={ 


receiveFlower: function( flower ){ 
A.receiveFlower( flower ); 
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} 
}; 


var A = { 
receiveFlower: function( flower ){ 
console.1og(“ 收 到 花 ' + flower ); 
} 
}; 


xiaoming.sendFlower( B ); 


很 显然 ， 执 行 结果 跟 第 一 段 代码 一 致 ， 至 此 我 们 就 完成 了 一 个 最 简单 的 代理 模式 的 编 


天 


Jo 


也 许 读者 会 疑惑 , 小 明 自 己 去 送 花 和 代理 B 帮 小 明 送 花 , 二 者 看 起 来 并 没有 本 质 的 区 别 , 引 


入 一 个 代理 对 象 看 起 来 只 是 把 事情 搞 复杂 了 而 已 。 


的 确 ， 此 处 的 代理 模式 毫 无 用 处 ， 它 所 做 的 只 是 把 请 求 简单 地 转交 给 本 体 。 但 不 管 怎样 ,我 


们 开始 引入 了 代理 ， 这 是 一 个 不 错 的 起 点 。 


现在 我 们 改变 故事 的 背景 设 定 ， 假 设 当 A 在 心情 好 的 时 候 收 到 花 ， 小 明 表 白 成 功 的 几率 有 


60%， 而 当 A 在 心情 差 的 时 候 收 到 花 ， 小 明 表 白 的 成 功率 无 限 趋 近 于 0。 


小 明 跟 A 刚刚 认识 两 天 ， 还 无 法 辨别 A 什么 时 候 心情 好 。 如 果 不 合 时 宜 地 把 花 送 给 A， 论 


被 直接 扔 掉 的 可 能 性 很 大 ， 这 束 花 可 是 小 明 吃 了 7 天 泡 面 换 来 的 。 


但 是 A 的 朋友 B 却 很 了 解 A， 所 以 小 明 只 管 把 花 交 给 B，B 会 监听 A 的 心情 变化 ， 然 后 选 


择 A 心情 好 的 时 候 把 花 转 交 给 A， 代 码 如 下 : 


var Flower = function(){}; 


var xiaoming = { 
sendFlower: function( target){ 
var flower = new Flower(); 
target.receiveFlower( flower ); 
} 
}; 


var B={ 
receiveFlower: function( flower ){ 


A.listenGoodMood(function(){ // 监听 A 的 好 心情 


A.receiveFlower( flower ); 
}); 
} 
}; 
var A = { 
receiveFlower: function( flower ){ 


console.1og(“ 收 到 花 ' + flower ); 


)， 
listenGoodMood: function( fn ){ 


setTimeout(function(){ // 假设 10 秒 之 后 A 的 心情 变 好 
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fn(); 
}，10000 ); 


}; 


xiaoming.sendFlower( B ); 


6.2 保护 代理 和 虚拟 代理 


虽然 这 只 是 个 虚拟 的 例子 ， 但 我 们 可 以 从 中 找到 两 种 代理 模式 的 身影 。 代 理 B 可 以 帮助 A 
过 滤 掉 一 些 请 求 ， 比 如 送 花 的 人 中 年 龄 太 大 的 或 者 没有 宝马 的 ， 这 种 请 求 就 可 以 直接 在 代理 B 
处 被 拒绝 掉 。 这 种 代理 叫 作 保护 代理 。A 和 B 一 个 充当 白 脸 ， 一 个 充当 黑 脸 。 白 脸 A 继续 保持 
良好 的 女神 形象 ， 不 希望 直接 拒绝 任何 人 ， 于 是 找 了 黑 脸 B 来 控制 对 A 的 访问 。 


另外 , 假设 现实 中 的 花 价 格 不 菲 ， 导 致 在 程序 世界 里 ，new Flower 也 是 一 个 代价 昂贵 的 操作 ， 
那么 我 们 可 以 把 new Flower 的 操作 交 给 代理 B 去 执行 ， 代 理 B 会 选择 在 A 心情 好 时 再 执行 new 
Flower， 这 是 代理 模式 的 另 一 种 形式 ， 叫 作 虚 拟 代理 。 虚 拟 代理 把 一 些 开 销 很 大 的 对 象 ， 延 迟到 
真正 需要 它 的 时 候 才 去 创建 。 代 码 如 下 : 
var B = { 
receiveFlower: function( flower ){ 
A.listenGoodMood(function(){ // 监听 A 的 好 心情 


var flower = new Flower(); // 延迟 创建 们 ower 对 象 
A.receiveFlower( flower ); 


}); 
} 
}; 
保护 代理 用 于 控制 不 同 权限 的 对 象 对 目标 对 象 的 访问 ， 但 在 JavaScript 并 不 容易 实现 保护 代 
理 ， 因 为 我 们 无 法 判断 谁 访问 了 某 个 对 象 。 而 虚拟 代理 是 最 常用 的 一 种 代理 模式 ， 本 章 主 要 讨论 


的 也 是 虚拟 代理 。 
当然 上 面 只 是 一 个 虚拟 的 例子 , 我 们 无 需 在 此 投入 过 多 近 精 力 , 接 下 来 我 们 看 另外 一 个 真实 
的 示例 。 


6.3 ”虚拟 代理 实现 图 片 预 加 载 


在 Web 开发 中 , 图 片 预 加 载 是 一 种 常用 的 技术 , 如 果 直 接 给 某 个 img 标签 节点 设置 src 属性 ， 
由 于 图 片 过 大 或 者 网 络 不 佳 ， 图 片 的 位 置 往往 有 段 时 间 会 是 一 片 空白 。 篆 见 的 做 法 是 先 用 一 张 
loading 图 片 占 位 , 然后 用 异步 的 方式 加 载 图 片 ,等 图 片 加 载 好 了 再 把 它 填充 到 img 节点 里 , 这 种 
场景 就 很 适合 使 用 虚拟 代理 。 

下 面 我 们 来 实现 这 个 虚拟 代理 , 首先 创建 一 个 普通 的 本 体 对 象 , 这 个 对 象 负责 往 页 面 中 创建 
一 个 img 标签 并且 提供 一 个 对 外 的 setsrc 接口 ， 外 界 调用 这 个 接口 , 便 可 以 给 该 img 标签 设置 
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src 属性 : 


var myImage = (function(){ 
var imgNode = document.createElement( 'img' ); 
document .body.appendChild( imgNode ); 


return { 
setSrc: function( src ){ 
imgNode.src = src; 
} 


} 
DO; 
myImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDysoyAoNk.jpg'" ); 


我 们 把 网 速 调 至 SKB/s， 然 后 通过 MyImage.setSrc 给 该 img 节点 设置 src, 可 以 看 到 , 在 图 片 
被 加 载 好 之 前 ， 页 面 中 有 一 段 长 长 的 空白 时 间 。 


现在 开始 引入 代理 对 象 proxyImage， 通 过 这 个 代理 对 象 ， 在 图 片 被 真正 加 载 好 之 前 ， 页 面 中 
将 出 现 一 张 占 位 的 菊花 图 loading.gif 来 提示 用 户 图 片 正在 加 载 。 代 码 如 下 : 


var myImage = (function(){ 
var imgNode = document.createElement( 'img' ); 
document .body.appendChild( imgNode ); 


return { 
setSrc: function( src ){ 
imgNode.src = src; 
} 


} 
])(); 


var proxyImage = (function(){ 
var img = new Image; 
img.onload = function(){ 
myImage.setSrc( this.src ); 


return { 
setSrc: function( src ){ 
myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif'" ); 
img.src = src; 


} 
} 
])(); 


proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDysoyAONk.jpg”); 


现在 我 们 通过 proxyImage 间接 地 访问 MyImage。proxyImage 控制 了 客户 对 MyImage 的 访问 ， 并 
且 在 此 过 程 中 加 入 一 些 额 外 的 操作 ， 比 如 在 真正 的 图 片 加 载 好 之 前 ， 先 把 img 节点 的 src 设置 为 
一 张 本 地 的 loading 图 片 。 
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6.4 代理 的 意义 


也 许 读 者 会 有 疑问 , 不 过 是 实现 一 个 小 小 的 图 片 预 加 载 功能 ， 即 使 不 需要 引入 任何 模式 也 能 
办 到 , 那么 引入 代理 模式 的 好 处 究竟 在 哪里 呢 ? 下 面 我 们 先 抛 开 代 理 ， 编 写 一 个 更 常见 的 图 片 预 
加 载 函 数 。 

不 用 代理 的 预 加 载 图 片 函 数 实现 如 下 : 


var MyImage = (function(){ 
var imgNode = document.createElement( 'img' ); 
document .body.appendChild( imgNode ); 
var img = new Image; 


img.onload = function(){ 
imgNode.src = img.src; 


}: 


return { 
setSrc: function( src ){ 
imgNode.src = 'file:// /C:/Users/svenzeng/Desktop/loading.gif'; 
img.src = src; 


} 

DO; 

MyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDysoyAoNk.jpg'" ); 

为 了 说 明代 理 的 意义 ， 下 面 我 们 引入 一 个 面向 对 象 设计 的 原则 一 一 单一 职责 原则 。 

单一 职责 原则 指 的 是 ， 就 一 个 类 (通常 也 包括 对 象 和 函数 等 ) 而 言 ， 应 该 仅 有 一 个 引起 它 变 
化 的 原因 。 如 果 一 个 对 象 承担 了 多 项 职责 ， 就 意味 着 这 个 对 象 将 变 得 巨大 , 引起 它 变 化 的 原因 可 
能 会 有 多 个 。 面 向 对 象 设计 鼓励 将 行为 分 布 到 细 粒 度 的 对 象 之 中 , 如果 一 个 对 象 承担 的 职责 过 多 ， 
等 于 把 这 些 职责 耦合 到 了 一 起 ， 这 种 耦合 会 导致 脆弱 和 低 内 聚 的 设计 。 当 变化 发 生 时 ,设计 可 能 
会 遭 到 意外 的 破坏 。 

职责 被 定义 为 “引起 变化 的 原因 ”。 上 上 段 代 码 中 的 MyImage 对 象 除了 负责 给 img 节点 设置 src 
外 ,还 要 负责 预 加 载 图 片 。 我 们 在 处 理 其 中 一 个 职责 时 ， 有 可 能 因为 其 强 耦 合 性 影响 另外 一 个 职 
责 的 实现 。 

另外 ,在 面向 对 象 的 程序 设计 中 ， 大 多 数 情况 下 ， 若 违反 其 他 任何 原则 ， 同 时 将 违反 开放 - 
封闭 原则 。 如 果 我 们 只 是 从 网 络 上 获取 一 些 体积 很 小 的 图 片 , 或 者 5 年 后 的 网 速 快 到 根本 不 再 需 
要 预 加 载 ， 我 们 可 能 希望 把 预 加 载 图 片 的 这 段 代 码 从 MyImage 对 象 里 删 掉 。 这 时 候 就 不 得 不 改动 
MyImage 对 象 了 。 

实际 上 ， 我 们 需要 的 只 是 给 img 节点 设置 src， 预 加 载 图 片 只 是 一 个 锅 上 添 花 的 功能 。 如 果 
能 把 这 个 操作 放 在 另 一 个 对 象 里 面 , 自然 是 一 个 非常 好 的 方法 。 于 是 代理 的 作用 在 这 里 就 体现 出 
来 了 ， 代 理 负责 预 加 载 图 片 ， 预 加 载 的 操作 完成 之 后 ， 把 请 求 重新 交 给 本 体 MyImage。 
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纵 观 整 个 程序 ， 我 们 并 没有 改变 或 者 增加 MyImage 的 接口 ， 但 是 通过 代理 对 象 ， 实 际 上 给 系 
统 添加 了 新 的 行为 。 这 是 符合 开放 -封闭 原则 的 。 给 img 节点 设置 src 和 图 片 预 加 载 这 两 个 功能 ， 
被 隔离 在 两 个 对 象 里 ， 它 们 可 以 各 自 变 化 而 不 影响 对 方 。 何 况 就 算 有 一 天 我 们 不 再 需要 预 加 载 ， 
那么 只 需要 改 成 请 求 本 体 而 不 是 请 求 代理 对 象 即 可 。 


6.5 代理 和 本 体 接口 的 一 致 性 


上 一 节 说 到 ， 如 果 有 一 天 我 们 不 再 需要 预 加 载 , 那么 就 不 再 需要 代理 对 象 , 可 以 选择 直接 请 
求 本 体 。 其 中 关键 是 代理 对 象 和 本 体 都 对 外 提供 了 setsrc 方法 ， 在 客户 看 来 ， 代 理 对 象 和 本 体 
是 一 致 的 ， 代理 接手 请 求 的 过 程 对 于 用 户 来 说 是 透明 的 ， 用 户 并 不 清楚 代理 和 本 体 的 区 别 ， 这 
样 做 有 两 个 好 处 。 

口 用 户 可 以 放心 地 请 求 代理 ， 他 只 关心 是 否 能 得 到 想 要 的 结 
口 在 任何 使 用 本 体 的 地 方 都 可 以 替换 成 使 用 代理 。 

在 Java 等 语言 中 ， 代 理 和 本 体 都 需要 显 式 地 实现 同一 个 接口 ， 一 方面 接口 保证 了 它们 会 拥 
有 同样 的 方法 ， 另 一 方面 ,面向 接口 编程 迎合 依赖 倒置 原则 ， 通 过 接口 进行 向 上 转型 ， 从 而 避 开 
编译 器 的 类 型 检查 ， 代 理 和 本 体 将 来 可 以 被 替换 使 用 。 

在 JavaScript 这 种 动态 类 型 语言 中 ， 我 们 有 时 通过 了 鸭子 类 型 来 检测 代理 和 本 体 是 否 都 实现 了 
setSrc 方法 ， 另 外 大 多 数 时 候 甚至 干脆 不 做 检测 ， 全 部 依赖 程序 员 的 自觉 性 ， 这 对 于 程序 的 健壮 
性 是 有 影响 的 。 不 过 对 于 一 门 快速 开发 的 脚本 语言 ， 这 些 影 响 还 是 在 可 以 接受 的 范围 内 ， 而 且 我 
们 也 习惯 了 没有 接口 的 世界 。 

另外 值得 一 提 的 是 ， 如 果 代理 对 象 和 本 体 对 象 都 为 一 个 函数 〈 函数 也 是 对 象 )， 函 数 必然 都 
能 被 执行 ， 则 可 以 认为 它们 也 具有 一 致 的 “接口 ”， 代 码 如 下 : 

var myImage = (function(){ 


var imgNode = document.createElement( 'img' ); 
document .body.appendChild( imgNode ); 


return function( src ){ 
imgNode.src = src; 


} 
])(); 


var proxyImage = (function(){ 
var img = new Image; 


img.onload = function(){ 
myImage( this.src ); 


return function( src ){ 
myImage( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' ); 
img.src = src; 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


6.6 ”虚拟 代理 合并 HTTP 请 求 95 


} 
])(); 


proxyImage( 'http:// imgcache.qq.com/music// N/k/000GGDysoyAoNk.jpg' ); 


6.6 ”虚拟 代理 合并 HTTP 请 求 


先 想 象 这 样 一 个 场景 : 每 周 我 们 都 要 写 一 份 工 作 周 报 , 周报 要 交 给 总 监 批阅 。 总 监 手 下 管理 
着 150 个 员工 ， 如果 我 们 每 个 人 直接 把 周报 发 给 总 监 ， 那 总 监 可 能 要 把 一 整 周 的 时 间 都 花 在 查看 
邮件 上 面 。 

现在 我 们 把 周报 发 给 各 自 的 组 长 , 组 长 作为 代理 , 把 组 内 成 员 的 周报 合并 提炼 成 一 份 后 一 次 
性 地 发 给 总 监 。 这 样 一 来 ， 总 监 的 邮箱 便 清净 多 了 。 

这 个 例子 在 程序 世界 里 很 容易 引起 共鸣 ， 在 Web 开发 中 ， 也 许 最 大 的 开销 就 是 网 络 请 求 。 
假设 我 们 在 做 一 个 文件 同步 的 功能 ， 当 我 们 选中 一 个 checkbox 的 时 候 ， 它 对 应 的 文件 就 会 被 同 
步 到 另外 一 台 备 用 服务 器 上 面 ， 如 图 6-3 所 示 。 


javascript 设 计 榜 式 与 开发 实践 样 童 ( word 版 -… 


VID_20130731_200435 


Rythem-2013-11-15 


liPlaySoft.com]YaHei.Consolas.1.11b 


图 6-3 
我 们 先 在 页 面 中 放置 好 这 些 checkbox 节点 : 


<body> 
<input type="checkbox” id="1"></input>1 
<input type="checkbox" id="2"></input>2 
<input type="checkbox" id="3"></input>3 
<input type="checkbox” id="4"></input>4 
<input type="checkbox” id="5"></input>5 
<input type="checkbox” id="6"></input>6 
<input type="checkbox” id="7"></input>7 
<input type="checkbox” id="8"></input>8 
<input type="checkbox” id="9"></input>9 

</body> 
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接 下 来 ， 给 这 些 checkbox 绑 定 点 击 事件 ， 并 且 在 点 击 的 同时 往 另 一 台 服 务 器 同步 文件 : 


var synchronousFile = function( id ){ 

console.log( ' 开 始 同步 文件 ，id 为 : ' + id ); 
var checkbox = document.getElementsByTagName( 'input' ); 
for ( var i = 0, c; c¢ = checkbox[ i++ ]; ){ 

c.onclick = function(){ 


if ( this.checked === true ){ 
synchronousFile( this.id ); 
} 


} 

}; 
当 我 们 选中 3 个 checkbox 的 时 候 ， 依 次 往 服务 器 发 送 了 3 次 同步 文件 的 请 求 。 而 点 击 一 个 
checkbox 并 不 是 很 复杂 的 操作 ,作为 APM250+ 的 资深 Dota 玩家 , 我 有 把 握 一 秒 钟 之 内 点 中 4 个 
checkbox。 可 以 预见 ， 如 此 频繁 的 网 络 请 求 将 会 带 来 相当 大 的 开销 。 


解决 方案 是 , 我 们 可 以 通过 一 个 代理 函数 proxySynchronousFile 来 收集 一 段 时 间 之 内 的 请 求 ， 
最 后 一 次 性 发 送 给 服务 器 。 比 如 我 们 等 待 2 秒 之 后 才 把 这 2 秒 之 内 需要 同步 的 文件 ID 打包 发 给 
服务 器 ， 如 果 不 是 对 实时 性 要 求 非 常 高 的 系统 ，2 秒 的 延迟 不 会 带 来 太 大 副作用 ， 却 能 大 大 减轻 
服务 器 的 压力 。 代 码 如 下 : 


var synchronousFile = function( id ){ 
console.1og( ' 开 始 同步 文件 ，id 为 : ' + id ); 


}; 


var proxySynchronousFile = (function(){ 
Var cache = []， // 保存 一 段 时 间 内 需要 同步 的 ID 
timer; // 定时 器 


return function( id ){ 
cache.push( id ); 
if ( timer ){ ”// 保证 不 会 覆盖 已 经 启动 的 定时 器 
return; 


} 


timer = setTimeout(function(){ 
synchronousFile( cache.join( ',' ) ); // 2 秒 后 向 本 体 发 送 需 要 同步 的 ID 集合 
clearTimeout( timer ); // 清空 定时 器 
timer = null; 
cache.length = 0; // 清空 ID 集合 
}, 2000 ); 


} 
DO; 
var checkbox = document.getElementsByTagName( 'input' ); 


for ( var i = 0, c; c¢ = checkbox[ i++ ]; ){ 
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c.onclick = function(){ 
if ( this.checked === true ){ 
proxySynchronousFile( this.id ); 


} 


6.7 ”虚拟 代理 在 惰性 加 载 中 的 应 用 


我 曾经 写 过 一 个 mini 控制 台 的 开源 项 目 miniConsole.js, 这 个 控制 台 可 以 帮助 开发 者 在 正 浏 
览 器 以 及 移动 端 浏览 器 上 进行 一 些 简单 的 调试 工作 。 调 用 方式 很 简单 
miniConsole.log(1); 


这 人 句 话 会 在 页 面 中 创建 一 个 div， 并 且 把 log 显示 在 div 里 面 ， 如 图 6-4 所 示 。 


[slHlrRl cIx| 


图 6-4 


miniConsole.js 的 代码 量 大 概 有 1000 行 左右 ,也 许 我 们 并 不 想 一 开始 就 加 载 这 么 大 的 JS 文 件 ， 
因为 也 许 并 不 是 每 个 用 户 都 需要 打印 log。 我 们 希望 在 有 必要 的 时 候 才 开始 加 载 它 ， 比 如 当 用 户 
按 下 F2 来 主动 唤 出 控制 台 的 时 候 。 

在 miniConsole.js 加 载 之 前 ， 为 了 能 够 让 用 户 正常 地 使 用 里 面 的 API， 通 常 我 们 的 解决 方案 
是 用 一 个 占 位 的 miniConsole 代理 对 象 来 给 用 户 提 前 使 用 ， 这 个 代理 对 象 提供 给 用 户 的 接口 ， 跟 
实际 的 miniConsole 是 一 样 的 。 

用 户 使 用 这 个 代理 对 象 来 打印 log 的 时 候 ， 并 不 会 真正 在 控制 台 内 打印 日 志 ， 更 不 会 在 页 
面 中 创建 任何 DOM 节点 。 即 使 我 们 想 这 样 做 也 无 能 为 力 ， 因 为 真正 的 miniConsole.js 还 没有 
被 加 载 。 


于 是 , 我们 可 以 把 打印 log 的 请 求 都 包 右 在 一 个 函数 里 面 ， 这 个 包装 了 请 求 的 函数 就 相当 于 
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其 他 语言 中 命令 模式 中 的 Command 对 象 。 随 后 这 些 函 数 将 全 部 被 放 到 缓存 队列 中 ， 这 些 逻 辑 都 是 
在 miniConsole 代理 对 象 中 完成 实现 的 。 等 用 户 按 下 F2 唤 出 控制 台 的 时 候 ， 才 开始 加 载 真 正 的 
miniConsole,js 的 代码 ， 加 载 完 成 之 后 将 遍历 miniConsole 代理 对 象 中 的 缓存 函数 队列 ， 同 时 依次 
执行 它们 。 

当然 , 请 求 的 到 底 是 什么 对 用 户 来 说 是 不 透明 的 ， 用 户 并 不 清楚 它 请 求 的 是 代理 对 象 ， 所 以 
他 可 以 在 任何 时 候 放 心地 使 用 miniConsole 对 象 。 

未 加 载 真正 的 miniConsole.js 之 前 的 代码 如 下 : 


var cache = []; 


var miniConsole = { 
log: function(){ 
var args = arguments; 
cache.push( function(){ 
return miniConsole.1og.apply( miniConsole, args ); 
}); 
} 
}; 


miniConsole.log(1); 


当 用 户 按 下 F2 时 ， 开 始 加 载 真正 的 miniConsolejs， 代 码 如 下 : 


var handler = function( ev ){ 
if ( ev.keyCode === 113 ){ 
var script = document.createElement( 'script' ); 
script.onload = function(){ 
for ( var i = 0, fn; fn = cache[ i++ ]; ){ 
fn(); 


} 
}; 
script.src = 'miniConsole.js'; 
document .getElementsByTagName( 'head' )[0].appendChild( script ); 
} 
}; 


document.body.addEventListener( 'keydown', handler, false ); 
// miniConsole.js 代码 : 


miniConsole = { 
log: function(){ 
// 真正 代码 略 
console.log( Array.prototype.join.call( arguments ) ); 
} 
}; 


虽然 我 们 没有 给 出 miniConsole,js 的 真正 代码 ， 但 这 不 影响 我 们 理解 其 中 的 逻辑 。 当 然 这 里 
还 要 注意 一 个 问题 ， 就 是 我 们 要 保证 在 F2 被 重复 按 下 的 时 候 ，miniConsole.js 只 被 加 载 一 次 。 另 
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外 我 们 整理 一 下 miniConsole 代理 对 象 的 代码 ， 使 它 成 为 一 个 标准 的 虚拟 代理 对 象 ， 代 码 如 下 : 


var miniConsole = (function(){ 
var cache = []; 
var handler = function( ev ){ 
if ( ev.keyCode === 113 ){ 
var script = document.createElement( 'script' ); 
script.onload = function(){ 
for ( var i = 0, fn; fn = cache[ i++ ]; ){ 
fn(); 
} 
}; 
script.src = 'miniConsole.js'; 
document.getElementsByTagName( 'head' )[0].appendChild( script ); 
document .body.removeEventListener( “keydown' ，handler );// 只 加 载 一 次 miniConsole.js 


} 
已 


document .body.addEventListener( 'keydown', handler, false ); 


return { 
log: function(){ 
var args = arguments; 
cache.push( function(){ 
return miniConsole.1og.apply( miniConsole, args ); 


]); 
】 
】 
DO; 
miniConsole.1og( 11 ); // 开始 打印 1og 


// miniConsole.js 代码 


miniConsole = { 
log: function(){ 
// 真正 代码 略 
console.log( Array.prototype.join.call( arguments ) ); 


} 
}; 


6.8 缓存 代理 


缓存 代理 可 以 为 一 些 开销 大 的 运算 结果 提供 暂时 的 存储 , 在 下 次 运算 时 ,如 果 传 递 进 来 的 参 
数 跟 之 前 一 致 ， 则 可 以 直接 返回 前 面 存储 的 运算 结 


6.8.1 缓存 代理 的 例子 一 一 计算 乘积 


为 了 节省 示例 代码 , 以 及 让 读者 把 注意 力 集中 在 代理 模式 上 面 , 这 里 编写 一 个 简单 的 求 乘 积 
的 程序 ， 请 读者 自行 把 它 脑 补 为 复杂 的 计算 。 
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先 创建 一 个 用 于 求 乘 积 的 函数 : 


Var 


及 


mult 
mult 


mult = function(){ 

console.log( “开始 计 算 乘 积 ” ); 

var a = 1; 

for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 
a = a* arguments[i]; 

. 


return a; 


( 2,，3 );  // 输出 : 6 
(人 25 3, 4 ); // 输出 : 24 


现在 加 入 缓存 代理 函数 : 


Var 


} 
DO 


proxyMult = (function(){ 
var cache = {}; 
return function(){ 
var args = Array.prototype.join.call( arguments, ','" ); 
if ( args in cache ){ 
return cache[ args ]; 
} 


return cache[ args ] = mult.apply( this, arguments ); 


了 


proxyMult( 1, 2, 3, 4 ); // 输出 : 24 
proxyMult( 1, 2, 3, 4 ); // 输出 : 24 


当 我 们 第 二 次 调用 proxyMult( 1，2，3，4 ) 的 时 候 ， 本 体 mult 函数 并 没有 被 计算 ，proxyMult 


直接 返回 了 之 前 缓存 好 的 计算 结 


通过 增加 缓存 代理 的 方式 ,mult 函数 可 以 继续 专注 于 自身 的 职责 一 一 计算 乘积 , 缓存 的 功能 


代理 


A 


对 象 实现 的 。 


6.8.2 
我 们 在 常常 在 项 目 中 遇 到 分 页 的 需求 , 同一 页 的 数据 理论 上 只 需要 去 后 台 拉 取 一 次 , 这 些 已 
经 拉 取 到 的 数据 在 某 个 地 方 被 缓存 之 后 ,下 次 再 请 求 同 一 页 的 时 候 , 便 可 以 直接 使 用 之 前 的 数据 。 


显然 这 里 也 可 以 引入 缓存 代理 , 实现 方式 跟 计 算 乘 积 的 例子 差不多 , 唯一 不 同 的 是 , 请 求 数 
据 是 个 异步 的 操作 ， 我 们 无 法 直接 把 计算 结果 放 到 代理 对 象 的 缓存 中 ， 而 是 要 通过 回调 的 方式 。 


缓存 代理 用 于 ajax 异步 请 求 数据 


具体 代码 不 再 费 述 ， 读 者 可 以 自行 实现 。 


6.9 用 高 阶 函 数 动态 创建 代理 
通过 传人 高 阶 函数 这 种 更 加 灵活 的 方式 ,可 以 为 各 种 计算 方法 创建 缓存 代理 。 现 在 这 些 计算 
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方法 被 当 作 参数 传人 一 个 专门 用 于 创建 缓存 代理 的 工厂 中 ， 这 样 一 来 ,我们 就 可 以 为 乘法 、 加 
法 、 减 法 等 创建 缓存 代理 ， 代 码 如 下 : 
eit hi oa 计算 乘积 di tt 
var mult = function(){ 
var a = 1; 
for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 
a = a * arguments[i]; 
} 


return a; 


}; 


var plus = function(){ 
var a = 0; 
for ( var i = 0, 1 = arguments.length; i < 1; i++ ){ 
a = a+ arguments[i]; 
} 


return a; 


}; 


var createproxyFactory = function( fn ){ 
var cache = {}; 
return function(){ 
var args = Array.prototype.join.call( arguments, ','" ); 
if ( args in cache ){ 
return cache[ args ]; 
} 


return cache[ args ] = fn.apply( this, arguments ); 


} 
} 


Var proxyMult = createproxyFactory( mult )， 
proxyPlus = createPproxyFactory( plus ); 


alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出 : 24 
alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出 : 24 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出 : 10 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出 : 10 


6.10 ”其 他 代理 模式 


代理 模式 的 变 体 种 类 非常 多 ， 限 于 篇 幅 及 其 在 JavaScript 中 的 适用 性 ， 本 章 只 简约 介绍 一 下 
这 些 代理 ， 就 不 一 一 详细 展开 说 明了 。 
口 防火 墙 代理 : 控制 网 络 资源 的 访问 ,保护 主题 不 让 “坏人 ”接近 。 
口 远程 代理 : 为 一 个 对 象 在 不 同 的 地 址 空间 提供 局 部 代表 ， 在 Java 中 ， 远 程 代理 可 以 是 另 
一 个 虚拟 机 中 的 对 象 。 
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口 保护 代理 : 用 于 对 象 应 该 有 不 同 访问 权限 的 情况 。 

口 智能 引用 代理 : 取代 了 简单 的 指针 ， 它 在 访问 对 象 时 执行 一 些 附加 操作 ， 比 如 计算 一 个 
对 象 被 引用 的 次 数 。 

口 写 时 复制 代理 : 通常 用 于 复制 一 个 庞大 对 象 的 情况 。 写 时 复制 代理 延迟 了 复制 的 过 程 ， 
当 对 象 被 真正 修改 时 , 才 对 它 进 行 复制 操作 。 写 时 复制 代理 是 虚拟 代理 的 一 种 变 体 , DLL 
( 操作 系统 中 的 动态 链接 库 ) 是 其 典型 运用 场景 。 


6.11 小结 


代理 模式 包括 许多 小 分 类 ， 在 JavaScript 开 发 中 最 常用 的 是 虚拟 代理 和 缓存 代理 。 虽 然 代 理 
模式 非常 有 用 ， 但 我 们 在 编写 业务 代码 的 时 候 ， 往 往 不 需要 去 预先 猜测 是 否 需要 使 用 代理 模式 。 
当真 正 发 现 不 方便 直接 访问 某 个 对 象 的 时 候 ， 再 编写 代理 也 不 迟 。 
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中 /时 


迭代 器 模式 


迭代 器 模式 是 指 提供 一 种 方法 顺序 访问 一 个 聚合 对 象 中 的 各 个 元 素 , 而 又 不 需要 暴露 该 对 象 
的 内 部 表示 。 和 迭代 器 模式 可 以 把 迁 代 的 过 程 从 业务 逻辑 中 分 离 出 来 ,在 使 用 迭代 需 模式 之 后 ， 即 
使 不 关心 对 象 的 内 部 构造 ， 也 可 以 按 顺 序 访问 其 中 的 每 个 元 素 。 


目前 , 钨 怕 只 有 在 一 些 “ 古 董 级 ”的 语言 中 才 会 为 实现 一 个 迭代 器 模式 而 烦恼 ,现在 流行 的 
大 部 分 语言 如 Java、Ruby 等 都 已 经 有 了 内 置 的 迭代 咒 实 现 ， 许多 浏览 器 也 支持 JavaScript 的 
Array.prototype. forEach, 


7.1 jQuery 中 的 迭代 器 


迭代 器 模式 无 非 就 是 循环 访问 聚合 对 象 中 的 各 个 元 素 。 比 如 jQuery 中 的 $.each 函数 , 其 中 回 
调 函 数 中 的 参数 i 为 当前 索引 ，n 为 当前 元 素 ， 代 码 如 下 : 


$.each( [1, 2, 3], function( i, n ){ 
console.log( ' 当 前 下 标 为 : '+ i ); 
console.1og( “当前 值 为 :" + n ); 

]); 
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7.2 ”实现 自己 的 迭代 器 


现在 我 们 来 自己 实现 一 个 each 函数 ，each 函数 接受 2 个 参数 ， 第 一 个 为 被 循环 的 数组 ， 
二 个 为 循环 中 的 每 一 步 后 将 被 触发 的 回调 函数 : 
var each = function( ary, callback ){ 


for ( var i = 0, 1 = ary.length; i < 1; it+ ){ 
callback.call( ary[i], i, ary[ i ] ); // 把 下 标 和 元 素 当 作 参 数 传 给 callback 函数 
} 


}; 
each( [ 1, 2, 3 ], function( i, n ){ 


alert ( [ i, n ] ); 
}); 


7.3 ”内 部 迭代 器 和 外 部 迭代 器 


迭代 器 可 以 分 为 内 部 迭代 器 和 外 部 和 迭代 器 , 它们 有 各 自 的 适用 场景 。 这 一 节 我 们 将 分 别 讨论 


这 两 种 迭代 器 。 

1. 内 部 迭代 器 

我 们 刚刚 编写 的 each 函数 属于 内 部 迭代 器 ，each 函数 的 内 部 已 经 定义 好 了 迭代 规则 ， 
全 接手 整个 迭代 过 程 ， 外 部 只 需要 一 次 初始 调用 。 


已 完 
已 元 


内 部 迭代 器 在 调用 的 时 候 非 常 方便 , 外 界 不 用 关心 迭代 器 内 部 的 实现 , 跟 迭 代 咒 的 交互 也 仅 


仅 是 一 次 初始 调用 , 但 这 也 刚好 是 内 部 迭代 器 的 缺点 。 由 于 内 部 迭代 器 的 迭代 规则 已 经 被 提 
定 ， 上 面 的 each 函数 就 无 法 同时 迭代 2 个 数组 了 。 


比如 现在 有 个 需求 ， 要 判断 2 个 数组 里 元 素 的 值 是 否 完全 相等 ， 如 果 不 改 写 each 函数 本 身 


的 代码 ， 我 们 能 够 入 手 的 地 方 似乎 只 剩 下 each 的 回调 函数 了 ， 代 码 如 下 : 


var compare = function( ary1, ary2 ){ 
if ( ary1.length !== ary2.length ){ 
throw new Error (“'ary1 和 ary2 不 相等 ' ); 


each( ary1, function( i, n ){ 
if ( n !== ary2[ i ] ){ 
throw new Error ( "ary1 和 ary2 不 相等 ' ); 


} 
]); 
alert ( 'ary1 和 ary2 相等 ' ); 
}; 
compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ('ary1 和 ary2 不 相等 ' ); 


说 实话 ， 这 个 compare 函数 一 点 都 算 不 上 好 看 ， 我 们 目前 能 够 顺利 完成 需求 ， 还 要 感 
JavaScript 里 可 和 数 当 作 参数 传递 的 特性 ， 但 在 其 他 语言 中 未 必 就 能 如 此 幸运 。 
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在 一 些 没 有 闭 包 的 语言 中 , 内 部 迭代 咒 本 身 的 实现 也 相当 复杂 。 比如 C 语 言 中 的 内 部 迭代 器 
是 用 函数 指针 来 实现 的 ， 循 环 处 理 所 需 要 的 数据 都 要 以 参数 的 形式 明确 地 从 外 面 传递 进去 。 

2. 外 部 迭代 器 

外 部 迭代 器 必须 显 式 地 请 求 迭 代 下 一 个 元 素 。 

外 部 迭代 器 增加 了 一 些 调用 的 复杂 度 , 但 相对 也 增强 了 和 迭代 器 的 灵活 性 , 我 们 可 以 手工 控 促 
迭代 的 过 程 或 者 顺序 。 

下 面 这 个 外 部 迭代 絮 的 实现 来 自 《 松 本 行 弘 的 程序 世界 》 第 4 章 ， 原 例 用 Ruby 写成 ， 这 里 
我 们 翻译 成 JavaScript: 


var Iterator = function( obj ){ 
Var current = 0; 


一 


var next = function(){ 
current += 1; 


}; 


var isDone = function(){ 
return current >= obj.length; 


}; 


var getCurrItem = function(){ 
return obj[ current ]; 


}; 
return { 
next: next, 
isDone: isDone, 
getCurrItem: getCurrItem 
中 


}; 
再 看 看 如 何 改写 compare 函数 : 


var compare = function( iterator1, iterator2 ){ 
while( !iterator1.isDone() && !iterator2.isDone() ){ 
if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){ 
throw new Error ( 'iterator1 和 iterator2 不 相等 ' ); 


iterator1.next(); 
iterator2.next(); 


} 


alert ( 'iterator1 和 iterator2 相等 ' ); 
} 


var iterator1 


Iterator( [ 1, 2, 3 ] ); 
Var iterator2 1, 2 


3 
Iterator( [ 1, 2, 3 ] ); 


compare( iterator1，iterator2 ); // 输出 : iterator1 和 iterator2 相等 
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外 部 迭代 器 虽然 调用 方式 相对 复杂 , 但 它 的 适用 面 更 广 ， 也 能 满足 更 多 变 的 需求 。 内 部 迭代 
器 和 外 部 迭代 器 在 实际 生产 中 没有 优 劣 之 分 ， 究 竟 使 用 哪个 要 根据 需求 场景 而 定 。 


7.4 和 迭代 类 数组 对 象 和 字面 量 对 象 


迭代 器 模式 不 仅 可 以 迭代 数组 ， 还 可 以 欠 代 一 些 类 数组 的 对 象 。 比 如 arguments 、 
{"0":"'a',"1":'b'} 等 。 通 过 上 面 的 代码 可 以 观察 到 ， 无 论 是 内 部 迭代 器 还 是 外 部 迭代 器 ， 只 要 被 
迭代 的 聚合 对 象 拥有 length 属性 而 且 可 以 用 下 标 访问 ， 那 它 就 可 以 被 迭代 。 
在 JavaScript 中 ，for in 语句 可 以 用 来 迭代 普通 字面 量 对 象 的 属性 。jQuery 中 提供 了 $.each' 
函数 来 封装 各 种 迭代 行为 : 
$.each = function( obj, callback ) { 
var value, 
i = 0， 
length = obj.length, 
isArray = isArraylike( obj ); 


if ( isArray ) { // 迭代 类 数组 
for ( ; i < length; i++ ) { 
value = callback.call( obj[ i ], i, obj[ i ] ); 


if ( value === false ) { 
break; 


} 


} 
} else { 
for (iinobj){ // 迭代 object 对 象 
value = callback.call( obj[ i ], i, obj[ i ] ); 
if ( value === false ) { 
break; 
} 
} 
} 
return obj; 


也 


7.5 倒序 迭代 器 


由 于 GoF 中 对 迭代 器 模式 的 定义 非常 松散 ， 所 以 我 们 可 以 有 多 种 多 样 的 迭代 器 实现 。 总 的 
来 说 ， 和 迭代 顺 模 式 提 供 了 循环 访问 一 个 聚合 对 象 中 每 个 元 素 的 方法 ， 但 它 没有 规定 我 们 以 顺序 、 
倒序 还 是 中 序 来 循环 遍历 聚合 对 象 。 

下 面 我 们 分 分 钟 实现 一 个 倒序 访问 的 迭代 器 : 

var reverseEach = function( ary, callback ){ 


for ( var 1 = ary.length - 1; 1 >= 0; 1-- ){ 
callback( 1, ary[ 1 ] ); 
} 
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}; 


reverseEach( [ 0, 1, 2 ], function( i, n ){ 
console.log( n ); // 分 别 输出 : 2，1 ,0 


}); 


7.6 ”中 止 迭 代 器 
迭代 器 可 以 像 普通 for 循环 中 的 break 一 档 


each 呆 数 里 有 这 样 一 句 : 


if ( value 
break; 
} 


false ) { 


， 提 供 一 种 跳出 循环 的 方法 。 在 1.4 节 jQuery 的 


这 人 句 代码 的 意思 是 ,约定 如 果 回 调 函 数 的 执行 结果 返回 false， 则 提前 终止 循环 。 下 面 我 们 


把 之 前 的 each 函数 改写 一 下 : 


var each = function( ary, callback ){ 


for ( var i = 0, 1 = ary.length; i < 1; i++){ 


if ( callback( i, ary[ i ] ) 
break; 
} 
} 


}; 


each( [ 1, 2, 3, 4, 5 ], function( i, n ){ 
if (n>3 )t{ 
return false; 


} 
console.log( n ); // 分 别 输出 : 1，2，3 
]); 
7.7 ” 友 代 器 模式 的 应 用 举例 


false ){ 


// callback 的 执行 结果 返回 false， 提 前 终止 迭代 


// n 大 于 3 的 时 候 终 止 循环 


2013 年 的 一 天 ， 当 我 在 重 构 某 个 项 目 中 文件 上 传 模块 的 代码 时 ， 发 现 了 下 面 这 段 代码 ， 它 
的 目的 是 根据 不 同 的 浏览 器 获取 相应 的 上 传 组 件 对 象 : 


var getUpload0bj = function(){ 
try{ 


return new ActiveXObject("TXFTNActiveX.FTNUpload"); 


}catch(e){ 
if ( supportFlash() ){ 


// IE 上 传 控 件 


// supportFlash 函数 未 提供 


var str = '<object type="application/x-shockwave-flash"></object>'; 
return $( str ).appendTo( $('body') ); 


}else{ 


var str = "<input name="file" type="file"/>'; 


// 表单 上 传 


return $( str ) .appendTo( $('body') ); 
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}; 

在 不 同 的 浏览 器 环境 下 , 选择 的 上 传 方式 是 不 一 样 的 。 因 为 使 用 浏览 器 的 上 传 控 件 进行 上 传 
速度 快 ， 可 以 暂停 和 续 传 ， 所 以 我 们 首先 会 优先 使 用 控件 上 传 。 如 果 浏 览 器 没有 安装 上 传 控 件 ， 
则 使 用 Flash 上 传 ， 如 果 连 Flash 也 没 安装 ， 那 就 只 好 使 用 浏览 器 原生 的 表单 上 传 了 。 

看 看 上 面 的 代码 ， 为 了 得 到 一 个 upload 对象， 这 个 getUpload0bj 函数 里 面 充斥 了 try，catch 
以 及 if 条 件 分 支 。 缺 点 是 显而易见 的 。 第 一 是 很 难 阅读 ， 第 二 是 严重 违反 开 闭 原则 。 在 开发 和 
调试 过 程 中 , 我 们 需要 来 回 切 换 不 同 的 上 传 方式 ,每 次 改动 都 相当 痛苦 。 后 来 我 们 还 增加 支持 了 
一 些 另 外 的 上 传 方式 ， 比 如 ，HTML5 上 传 ， 这 时 候 唯 一 的 办 法 是 继续 往 getuploadobj 函数 里 增 
加 条 件 分 支 。 
现在 来 梳理 一 下 问题 ， 目 前 一 共有 3 种 可 能 的 上 传 方式 , 我 们 不 知道 目前 正在 使 用 的 浏览 
支持 哪 几 种 。 就 好 比 我 们 有 一 个 钥匙 串 ， 其 中 共有 3 把 钥匙 ,我 们 想 打开 一 扇 门 但 是 不 知道 该 使 
用 哪 把 钥匙 ， 于 是 从 第 一 把 钥 是 开始， 迭代 钥匙 串 进行 尝试 ， 直 到 找到 了 正确 的 钥匙 为 止 。 
同样 ， 我 们 把 每 种 获取 upload 对 象 的 方法 都 封装 在 各 自 的 函数 里 ， 然 后 使 用 一 个 迭代 器 ， 
迭代 获取 这 些 upload 对 象 ， 直 到 获取 到 一 个 可 用 的 为 止 : 


var getActiveUp1oad0bj = function(){ 
try{ 
return new ActiveXObject( "TXFTNActiveX.FTNUpload" ); // IE 上 传 控件 
}catch(e){ 
return false; 
} 


}; 


var getFlashUpload0bj = function(){ 
if ( supportFlash() ){ // supportFlash 函数 未 提供 
var str = '<object type="application/x-shockwave-flash"></object>'; 
return $( str ).appendTo( $('body') ); 


return false; 


3 


var getFormUplad0bj = function(){ 
var str = "<input name="file" type="file" class="ui-file"/>'; // 表单 上 传 
return $( str ).appendTo( $('body') ); 
}; 
在 getActiveUpload0bj、getFlashUpload0bj 、getFormUplad0bj 这 3 个 函数 中 都 有 同一 个 约定 : 
如 果 该 函数 里 面 的 upload 对象 是 可 用 的 ， 则 让 函数 返回 该 对 象 ， 反 之 返回 false， 提 示 迭 代 带 继 
续 往 后 面 进行 迭代 。 
所 以 我 们 的 迭代 器 只 需 进 行 下 面 这 几 步 工作 。 
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口 提供 一 个 可 以 被 迭代 的 方法 ,使 得 getActiveUpload0bj, getFlashUpload0bj 以 及 getFlashuploadobj 
依照 优先 级 被 循环 迭代 。 

口 如 果 正 在 被 迭代 的 函数 返回 一 个 对 象 ， 则 表示 找到 了 正确 的 upload 对 象 ， 反 之 如 果 该 函 
数 返 回 false， 则 让 迭代 器 继续 工作 。 


和 欠 代 器 代码 如 下 : 


var iteratorUpload0bj = function(){ 
for ( var i = 0, fn; fn = arguments[ it+ ]; ){ 
var upload0bj = fn(); 
if ( uploadobj !== false ){ 
return up1oad0bj ; 
} 


} 


}; 

var uploadobj = iteratorUploadObj( getActiveUpload0bj, getFlashUploadObj, getFormUplad0bj ); 

重 构 代码 之 后 ， 我 们 可 以 看 到 ， 获 取 不 同上 传 对 象 的 方法 被 隔离 在 各 自 的 函数 里 互 不 干扰 ， 
try、catch 和 if 分 支 不 再 纠缠 在 一 起 ， 使 得 我 们 可 以 很 方便 地 的 维护 和 扩展 代码 。 比 如 ， 后 来 
我 们 又 给 上 传 项 目 增加 了 Webkit 控 件 上 传 和 HTML5 上 传 ， 我 们 要 做 的 仅仅 是 下 面 一 些 工作 。 

口 增加 分 别 获取 Webkit 控件 上 传 对 象 和 HTML5 上 传 对 象 的 函数 : 


var getWebkitUpload0bj = function(){ 
// 具体 代码 略 


}; 


var getHtm15Up1oad0bj = function(){ 
// 具体 代码 略 
}; 


口 依照 优先 级 把 它们 添加 进 迭 代 带 : 


var upload0bj = iteratorUpload0bj( getActiveUpload0bj, getWebkitUpload0bj, 
getFlashUploadObj, getHtml5Upload0bj, getFormUplad0bj ); 


7.8 小 结 


迭代 器 模 式 是 一 种 相对 简单 的 模式 ,简单 到 很 多 时 候 我 们 都 不 认为 它 是 一 种 设计 模式 。 目 前 
的 绝 大 部 分 语言 都 内 置 了 迭代 器 。 
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GE 


发 布 - 订 阅 模式 


发 布 -订阅 模式 又 叫 观 察 者 模式 ， 它 定义 对 象 间 的 一 种 一 对 多 的 依赖 关系 ， 当 一 个 对 象 的 状 
态 发 生 改 变 时 ， 所 有 依赖 于 它 的 对 象 都 将 得 到 通知 。 在 JavaScript 开发 中 ， 我 们 一般 用 事件 模型 
来 替代 传统 的 发 布 -订阅 模式 。 


8.1 现实 中 的 发 布 -订阅 模式 


不 论 是 在 程序 世界 里 还 是 现实 生活 中 ， 发 布 -订阅 模式 的 应 用 都 非常 之 广泛 。 我 们 先 看 一 个 
现实 中 的 例子 。 

小 明 最 近 看 上 了 一 套房 子 ， 到 了 售 楼 处 之 后 才 被 告知 ， 该 楼 盘 的 房子 早已 售 欧 。 好 在 售 楼 
MM 告诉 小 明 ， 不 久 后 还 有 一 些 尾 盘 推出 ， 开 发 商 正 在 办 理 相 关 手 续 ， 手 续 办 好 后 便 可 以 购买 。 
但 到 底 是 什么 时 候 ， 目 前 还 没有 人 能 够 知道 。 

于 是 小 明 记 下 了 售 楼 处 的 电话 , 以 后 每 天 都 会 打 电 话 过 去 询问 是 不 是 已 经 到 了 购买 时 间 。 除 
了 小 明 ,， 还 有 小 红 、 小 强 、 小 龙 也 会 每 天 向 售 楼 处 咨询 这 个 问题 。 一 个 星期 过 后 ， 售 楼 MM 决 
定 辞 职 ， 因 为 厌倦 了 每 天 回答 1000 个 相同 内 容 的 电话 。 

当然 现实 中 没有 这 么 笨 的 销售 公司 , 实际 上 故事 是 这 样 的: 小 明 离开 之 前 ,把 电话 号 码 留 在 
了 和 售 楼 处 。 售 楼 MM 答应 他 ， 新 楼 盘 一 推出 就 马上 发 信息 通知 小 明 。 小 红 、 小 强 和 小 龙 也 是 一 
样 ， 他 们 的 电话 号 码 都 被 记 在 售 楼 处 的 花 名 册 上 ， 新 楼 盘 推 出 的 时 候 ， 售 楼 MM 会 翻 开 花 名 册 ， 
遍历 上 面 的 电话 号 码 ， 依 次 发 送 一 条 短信 来 通知 他 们 。 


8.2 ”发布 -订阅 模式 的 作用 
在 刚刚 的 例子 中 ， 发 送 短信 通知 就 是 一 个 典型 的 发 布 -订阅 模式 ， 小 明 、 小 红 等 购买 者 都 是 


订阅 者 ,他 们 订阅 了 房子 开 售 的 消息 。 售 楼 处 作为 发 布 者 ,会 在 合适 的 时 候 遍历 花 名 册 上 的 电话 
号 码 ， 依 次 给 购房 者 发 布 消息 。 
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可 以 发 现 ， 在 这 个 例子 中 使 用 发 布 -订阅 模式 有 着 显而易见 的 优点 。 

口 购房 者 不 用 再 天 天 给 售 楼 处 打 电 话 咨询 开 售 时 间 ， 在 合适 的 时 间 点 ， 售 楼 处 作为 发 布 者 

会 通知 这 些 消息 订阅 者 。 

口 购房 者 和 售 楼 处 之 间 不 再 强 耦 合 在 一 起 ， 当 有 新 的 购房 者 出 现时 ， 他 只 需 把 手机 号 码 留 
在 售 楼 处 ， 售 楼 处 不 关心 购房 者 的 任何 情况 ， 不 管 购房 者 是 男 是 女 还 是 一 只 猴子 。 而 售 
楼 处 的 任何 变动 也 不 会 影响 购买 者 ， 比 如 售 楼 MM 离职 ， 售 楼 处 从 一 楼 搬 到 二 楼 ， 这 些 
改变 都 跟 购 房 者 无 关 ， 只 要 售 楼 处 记得 发 短信 这 件 事情 。 

第 一 点 说 明 发 布 - 订 阅 模式 可 以 广泛 应 用 于 异步 编程 中 , 这 是 一 种 蔡 代 传递 回调 函数 的 方案 。 
比如 ,我 们 可 以 订阅 ajax 请 求 的 error、succ 等 事件 。 或 者 如 果 想 在 动画 的 每 一 帧 完成 之 后 做 一 
些 事情 , 那 我 们 可 以 订阅 一 个 事件 ， 然 后 在 动画 的 每 一 帧 完成 之 后 发 布 这 个 事件 。 在 异步 编程 中 
使 用 发 布 -订阅 模式 ， 我 们 就 无 需 过 多 关注 对 象 在 异步 运行 期 间 的 内 部 状态 ， 而 只 需要 订阅 感 兴 
趣 的 事件 发 生 点 。 

第 二 点 说 明 发 布 -订阅 模式 可 以 取代 对 象 之 间 硬 编码 的 通知 机 制 ， 一 个 对 象 不 用 再 显 式 地 调 

用 另外 一 个 对 象 的 某 个 接口 。 发 布 -订阅 模式 让 两 个 对 象 松 耦合 地 联系 在 一 起 ， 虽 然 不 太 清 楚 和 披 

此 的 细节 ,但 这 不 影响 它们 之 间 相 互通 信 。 当 有 新 的 订阅 者 出 现时 ， 发 布 者 的 代码 不 需要 任何 修 

改 ; 同样 发 布 者 需要 改变 时 ， 也 不 会 影响 到 之 前 的 订阅 者 。 只 要 之 前 约定 的 事件 名 没有 变化 ,就 

可 以 自由 地 改变 它们 。 


[ay 


8.3 DOM 事件 


实际 上 ， 只 要 我 们 曾经 在 DOM 节点 上 面 绑 定 过 事件 函数 ， 那 我 们 就 曾经 使 用 过 发 布 -订阅 
模式 ,来 看 看 下 面 这 两 句 简单 的 代码 发 生 了 什么 事情 : 
document .body.addEventListener( 'click', function(){ 


alert(2); 
}, false ); 


document.body.click(); ”// 模拟 用 户 点 击 


在 这 里 需要 监控 用 户 点 击 document.body 的 动作 ,但 是 我 们 没 办 法 预知 用 户 将 在 什么 时 候 点 
击 。 所 以 我 们 订阅 document.body 上 的 click 事件 ， 当 body 节点 被 点 击 时 ，body 节点 便 会 向 订阅 
者 发 布 这 个 消息 。 这 很 像 购房 的 例子 ,购房 者 不 知道 房子 什么 时 候 开 售 ， 于 是 他 在 订阅 消息 后 等 
待 售 楼 处 发 布 消息 。 

当然 我 们 还 可 以 随意 增加 或 者 删除 订阅 者 ， 增 加 任何 订阅 者 都 不 会 影响 发 布 者 代码 的 编写 : 

document .body.addEventListener( 'click', function(){ 


alert(2); 
}, false ); 


document .body.addEventListener( 'click', function(){ 
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8.4 


alert(3); 
}, false ); 


document.body.addEventListener( 'click', function(){ 
alert(4); 
}, false ); 


document .body.click(); // 模拟 用 户 点 击 


注意 ， 手 动 触 发 事件 更 好 的 做 法 是 正 下 用 fireEvent， 标 准 浏览 如 下 用 dispatchEvent 实现 。 
自 定义 事件 
除了 DOM 事件 ， 我 们 还 会 经 常 实 现 一 些 自 定 义 的 事件 ， 这 种 依靠 自 定 义 事件 完成 的 发 布 - 


订阅 模式 可 以 用 于 任何 JavaScript 代码 中 。 


比如 
些 信 ， 


现在 看 看 如 何 一 步 步 实现 发 布 -订阅 模式 。 

口 首先 要 指定 好 谁 充当 发 布 者 ( 比如 售 楼 处 ); 

口 然后 给 发 布 者 添加 一 个 缓存 列表 , 用 于 存放 回调 函数 以 便 通 知 订阅 者 ( 售 楼 处 的 花 名 册 ); 

口 最 后 发 布 消息 的 时 候 ， 发 布 者 会 遍历 这 个 缓存 列表 ， 依 次 触发 里 面 存放 的 订阅 者 回调 函 
数 (遍历 花 名 册 ， 挨 个 发 短信 )。 

另外 , 我 们 还 可 以 往 回 调 函 数 里 填 人 一 些 参数 , 订阅 者 可 以 接收 这 些 参数 。 这 是 很 有 必要 的 ， 

售 楼 处 可 以 在 发 给 订阅 者 的 短信 里 加 上 房子 的 单价 、 面 积 、 容 积 率 等 信息 , 订阅 者 接收 到 这 

息 之 后 可 以 进行 各 自 的 处 理 : 


var salesOffices = {}; // 定义 售 楼 处 


salesOffices.clientList = []; // 缓存 列表 ， 存 放 订 阅 者 的 回调 函数 


salesOffices.listen = function( fn ){ // 增加 订阅 者 
this.clientList.push( fn ); ”// 订阅 的 消息 添加 进 缓存 列表 
}; 


salesOffices.trigger = function(){ // 发 布 消 息 
for( var i = 0, fn; fn = this.clientList[ i++ ]; ){ 
fn.apply( this, arguments ); // (2) // arguments 是 发 布 消息 时 带 上 的 参数 


}; 

下 面 我 们 来 进行 一 些 简单 的 测试 

salesOffices.listen( function( price, squareMeter ){ // 小 明 订 阅 消息 
console.1log(“ 价 格 = "+ price ); 


console.log( 'squareMeter= ' + squareMeter ); 


}); 


salesOffices.listen( function( price, squareMeter ){ // 小 红 订 阅 消息 
console.1log(“ 价 格 = "+ price ); 
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console.log( 'squareMeter= ' + squareMeter ); 


}); 


salesOffices.trigger( 2000000, 88 ); // 输出 : 200 万 ，88 平方 米 

salesOffices.trigger( 3000000, 110 ); // 输出 : 300 万 ，110 平方 米 

至 此 ,我 们 已 经 实现 了 一 个 最 简单 的 发 布 -订阅 模式 ,但 这 里 还 存在 一 些 问题 。 我 们 看 到 订 
阅 者 接收 到 了 发 布 者 发 布 的 每 个 消息 ， 虽 然 小 明 只 想 买 88 平方 米 的 房子 , 但 是 发 布 者 把 110 平 
方 米 的 信息 也 推送 给 了 小 明 , 这 对 小 明 来 说 是 不 必要 的 困扰 。 所 以 我 们 有 必要 增加 一 个 标示 key， 
让 订阅 者 只 订阅 自己 感 兴趣 的 消息 。 改 写 后 的 代码 如 下 : 


var salesOffices = {}; // 定义 信 楼 处 


salesOffices.clientList = {}; // 缓存 列表 ， 存 放 订 阅 者 的 回调 函数 


salesOffices.listen = function( key, fn ){ 
if ( !this.clientList[ key ] ){ ”// 如 果 还 没有 订阅 过 此 类 消息 ， 给 该 类 消息 创建 一 个 缓存 列表 
this.clientList[ key ] = []; 


} 
this.clientList[ key ].push( fn );  ”// 订阅 的 消息 添加 进 消息 缓存 列表 
}; 


salesOffices.trigger = function(){ // 发 布 消息 
var key = Array.prototype.shift.call( arguments )， // 取出 消息 类 型 
fns = this.clientList[ key ];  ”// 取出 该 消息 对 应 的 回调 函数 集合 


if ( !fns || fns.length === 0 ){ // 如 果 没 有 订阅 该 消息 ， 则 返回 
return false; 


} 


for( var i = 0, fn; fn = fns[ i++ ]; ){ 
fn.apply( this, arguments ); // (2) // arguments 是 发 布 消息 时 附送 的 参数 


}; 


salesOffices.listen( 'squareMeter88', function( price ){ // 小 明 订阅 88 平方 米 房 子 的 消息 
console.1log(“ 价 格 = ' + price ); // 输出 : 2000000 


]); 

salesOffices.listen( 'squareMeter110', function( price ){ // 小 红 订 阅 110 平方 米 房 子 的 消息 
console.1log(“ 价 格 = "+ price ); // 输出 : 3000000 

]); 


salesOffices.trigger( 'squareMeter88', 2000000 ); // 发 布 88 平方 米 房子 的 价格 
salesOffices.trigger( 'squareMeter110', 3000000 ); // 发 布 110 平方 米 房子 的 价格 


很 明显 ， 现 在 订阅 者 可 以 只 订阅 自己 感 兴趣 的 事件 了 。 


8.5 发布- 订阅 模式 的 通用 实现 
现在 我 们 已 经 看 到 了 如 何 让 售 楼 处 拥有 接受 订阅 和 发 布 事件 的 功能 , 假设 现在 小 明 又 去 另 一 
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个 售 楼 处 买房 子 , 那么 这 段 代码 是 否 必须 在 另 一 个 售 楼 处 对 象 上 重 写 一 次 呢 , 有 没有 办 法 可 以 让 
所 有 对 象 都 拥有 发 布 -订阅 功能 呢 ? 
答案 显然 是 有 的 ，JavaScript 作为 一 门 解释 执行 的 语言 ， 给 对 象 动态 添加 职责 是 


[Ne 


所 当然 的 


hl 


所 以 我 们 把 发 布 -订阅 的 功能 提取 出 来 ， 放 在 一 个 单独 的 对 象 内 : 


var event = { 
clientList: []， 
listen: function( key, fn ){ 
if ( !this.clientList[ key ] ){ 
this.clientList[ key ] = []; 
} 


this.clientList[ key ].push( fn ); // 订阅 的 消息 添加 进 缓存 列表 
}, 
trigger: function(){ 
var key = Array.prototype.shift.call( arguments )， // (1); 
fns = this.clientList[ key ]; 


if ( !fns || fns.length === 0 ){ // 如 果 没 有 绑 定 对 应 的 消息 
return false; 
} 


for( var i = 0, fn; fn = fns[ i+t+ ]; ){ 
fn.apply( this, arguments ); // (2) // arguments 是 trigger 时 带 上 的 参数 


} 
Bs 


再 定义 一 个 installEvent 函数 ， 这 个 函数 可 以 给 所 有 的 对 象 都 动态 安装 发 布 -订阅 功能 : 


var installEvent = function( obj ){ 
for ( var i in event ){ 
obj[ i ] = event[ i ]; 
} 


BS 
再 来 测试 一 番 ， 我 们 给 售 楼 处 对 象 sales0ffices 动态 增加 发 布 - 订 阅 功能 : 


var salesOffices = {}; 
installEvent( salesOffices ); 


salesOffices.listen( 'squareMeter88', function( price ){ // 小 明 订 阅 消息 
console.1log(“ 价 格 = "+ price ); 


}); 

salesOffices.listen( 'squareMeter100', function( price ){ // 小 红 订 阅 消息 
console.1log(“ 价 格 = "+ price ); 

}); 


salesOffices.trigger( 'squareMeter88', 2000000 ); // 输出 : 2000000 
salesOffices.trigger( 'squareMeter100', 3000000 ); // 输出 : 3000000 
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8.6 取消 订阅 的 事件 


有 时 候 , 我 们 也 许 需要 取消 订阅 事件 的 功能 。 比 如 小 明 突 然 不 想 买房 子 了 ,为 了 避免 继续 接 
收 到 售 楼 处 推送 过 来 的 短信 ， 小 明 需 要 取消 之 前 订阅 的 事件 。 现 在 我 们 给 event 对 象 增加 remove 
方法 : 
event.remove = function( key, fn ){ 
var fns = this.clientList[ key ]; 


if ( !fns ){ // 如 果 key 对 应 的 消息 没有 被 人 订阅 ， 则 直接 返回 
return false; 


} 
if ( !fn ){  ”// 如 果 没 有 传 入 具体 的 回调 函数 ， 表 示 需 要 取消 key 对 应 消息 的 所 有 订阅 
fns 8& ( fns.length = 0 ); 


}else{ 
for ( var 1 = fns.length - 1; 1 >=0; 1-- ){  ”// 反 向 遍历 订阅 的 回调 函数 列表 
var fn = fns[ 1 ]; 
if ( fn=== fn ){ 
fns.splice( 1, 1 ); // 删除 订阅 者 的 回调 函数 
} 
} 
} 


和 


var salesOffices = {}; 
var installEvent = function( obj ){ 
for ( var i in event ){ 
obj[ i ] = event[ i ]; 
} 


} 
installEvent( salesOffices ); 


salesOffices.listen( 'squareMeter88', fn1 = function( price ){ // 小 明 订 阅 消息 
Console.1og(“ 价 格 = ' + price ); 
]); 


salesOffices.listen( 'squareMeter88', fn2 = function( price ){ // 小 红 订 阅 消息 
console.1og(“ 价 格 = ' + price ); 


]); 
salesOffices.remove( 'squareMeter88', fn1 ); // 删除 小 明 的 订阅 
salesOffices.trigger( 'squareMeter88', 2000000 ); // 输出 : 2000000 


8.7 ”真实 的 例子 一 一 网 站 登录 


通过 售 楼 处 的 虚拟 例子 ， 我 们 对 发 布 -订阅 模式 的 概念 和 实现 都 已 经 熟 秋 了， 那么 现在 就 趁 
热 打铁 ， 看 一 个 真实 的 项 目 。 


假如 我 们 正在 开发 一 个 商城 网 站 ， 网 站 里 有 header 头 部 、nav 导航 、 消 息 列表 、 购 物 车 等 模 
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块 ,这 儿 个 模块 的 渲染 有 一 个 共同 的 前 提 条 件 , 就 是 必须 先 用 ajax 异步 请 求 获取 用 户 的 登录 信息 。 
这 是 很 正常 的 , 比如 用 户 的 名 字 和 头像 要 显示 在 header 模块 里 , 而 这 两 个 字段 都 来 自用 户 登 录 后 
返回 的 信息 。 


至 于 ajax 请 求 什么 时 候 能 成 功 返 回 用 户 信息 , 这 点 我 们 没有 办 法 确定 。 现在 的 情节 看 起 来 像 
极 了 售 楼 处 的 例子 ， 小 明 不 知道 什么 时 候 开发 商 的 售 楼 手续 能 够 成 功 办 下 来 。 

但 现在 还 不 足以 说 服 我 们 在 此 使 用 发 布 - 订 阅 模式 ， 因 为 异步 的 问题 通常 也 可 以 用 回调 函数 
来 解决 。 更 重要 的 一 点 是 ， 我 们 不 知道 除了 header 头 部 、nav 导航 、 消 息 列表 、 购 物 车 之 外 ,将 
来 还 有 哪些 模块 需要 使 用 这 些 用 户 信息 。 如 果 它 们 和 用 户 信息 模块 产生 了 强 耦 合 ,比如 下 面 这 样 
的 形式 : 

login.succ(function(data){ 

header.setAvatar( data.avatar);  // 设置 header 模块 的 头像 
nav.setAvatar( data.avatar ); // 设置 导航 模块 的 头像 


message.refresh(); // 刷新 消息 列表 
cart.refresh(); // 刷新 购物 车 列表 


]); 


现在 登录 模块 是 我 们 负责 编写 的 ， 但 我 们 还 必须 了 解 header 模块 里 设置 头像 的 方法 叫 
setAvatar 、 购 物 车 模块 里 刷新 的 方法 叫 refresh， 这 种 耦合 性 会 使 程序 变 得 僵硬 ，header 模块 不 
能 随意 再 改变 setAvata 的 方法 名 ， 它 自身 的 名 字 也 不 能 被 改 为 headerl 、header2。 这 是 针对 具 
体 实 现 编程 的 典型 例子 ， 针 对 具体 实现 编程 是 不 被 赞同 的 。 


等 到 有 一 天 ,项 目 中 又 新 增 了 一 个 收 货 地 址 管理 的 模块 , 这 个 模块 本 来 是 另 一 个 同事 所 写 的 ， 
而 此 时 你 正在 马来西亚 度假 ， 但 是 他 却 不 得 不 给 你 打 电 话 :“Hi， 登 录 之 后 麻烦 刷新 一 下 收 货 地 
址 列表 。 ”于 是 你 又 翻 开 你 3 个 月 前 写 的 登录 模块 ， 在 最 后 部 分 加 上 这 行 代 码 : 


login.succ(function( data ){ 
header.setAvatar( data.avatar); 
nav.setAvatar( data.avatar ); 
message.refresh(); 
cart.refresh(); 
address.refresh(); // 增加 这 行 代码 


LA 


}); 

我 们 就 会 越 来 越 疫 于 应 付 这 些 突如其来 的 业务 要 求 , 要 么 跳槽 了 事 , 要 么 必须 来 重 构 这 些 代码 。 

用 发 布 -订阅 模式 重 写 之 后 , 对 用 户 信息 感 兴趣 的 业务 模块 将 自行 订阅 登录 成 功 的 消息 事件 。 
当 登 录 成 功 时 ,登录 模块 只 需要 发 布 登录 成 功 的 消息 ， 而 业务 方 接受 到 消息 之 后 ， 就 会 开始 进行 
各 自 的 业务 处 理 ， 登 录 模 块 并 不 关心 业务 方 究竟 要 做 什么 ,也 不 想 去 了 解 它们 的 内 部 细节 。 改 善 
后 的 代码 如 下 : 

$.ajax( 'http:// xxx.com?login', function(data){ // 登录 成 功 


login.trigger( 'loginSucc', data); ”// 发 布 登录 成 功 的 消息 
]); 
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各 模块 监听 登录 成 功 的 消息 : 


var header = (function(){ // header 模块 

login.listen( 'loginSucc', function( data){ 
header.setAvatar( data.avatar ); 

]); 

return { 
setAvatar: function( data ){ 

console.1og( “设置 header 模块 的 头像 ); 

} 


} 
])(); 


var nav = (function(){ // nav 模块 
login.listen( 'loginSucc', function( data ){ 
nav.setAvatar( data.avatar ); 


})); 
return { 
setAvatar: function( avatar ){ 
console.log( ' 设 置 nav 模块 的 头像 ' ); 
} 
} 
DO; 


如 上 所 述 ， 我们 随时 可 以 把 setAvatar 的 方法 名 改 成 setTouxiang。 如 果 有 一 天 在 登录 完成 之 
后 ,又 增加 一 个 刷新 收 货 地 址 列表 的 行为 ,那么 只 要 在 收 货 地 址 模块 里 加 上 监听 消息 的 方法 即 可 ， 
而 这 可 以 让 开发 该 模块 的 同事 自己 完成 ,你 作为 登录 模块 的 开发 者 ,永远 不 用 再 关心 这 些 行为 了 。 
代码 如 下 : 


var address = (function(){ // nav 模块 
login.listen( 'loginSucc', function( obj ){ 
address.refresh( obj ); 
}); 
return { 
refresh: function( avatar ){ 
console.1og( “刷新 收 货 地 址 列表 ); 


} 
})(); 
8.8 全 局 的 发 布 - 订 阅 对 象 
回想 下 刚刚 实现 的 发 布 -订阅 模式 ， 我 们 给 售 楼 处 对 象 和 登录 对 象 都 添加 了 订阅 和 发 布 的 功 
能 ， 这 里 还 存在 两 个 小 问题 。 
口 我 们 给 每 个 发 布 者 对 象 都 添加 了 listen 和 trigger 方法 ， 以 及 一 个 缓存 列表 clientList， 
这 其 实 是 一 种 资源 浪费 。 


口 小 明 跟 售 楼 处 对 象 还 是 存在 一 定 的 耦合 性 ， 小 明 至 少 要 知道 售 楼 处 对 象 的 名 字 是 
sales0ffices， 才 能 顺利 的 订阅 到 事件 。 见 如 下 代码 : 
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salesOffices.listen( 'squareMeter100', function( price ){ // 小 明 订 阅 消息 
console.1log(“ 价 格 = "+ price ); 
}); 
如 果 小 明 还 关心 300 平 方 米 的 房子 , 而 这 套房 子 的 卖家 是 sales0ffices2， 这 意味 着 小 明 要 开 
台 订 阅 sales0ffices2 对 象 。 见 如 下 代码 : 


salesOffices2.1isten( 'squareMeter300', function( price ){ // 小 明 订 阅 消息 

console.log(“ 价 格 = "+ price ); 

}); 

其 实在 现实 中 , 买房 子 未 必要 亲自 去 售 楼 处 ,我 们 只 要 把 订阅 的 请 求 交 给 中 介 公 司 ， 而 各 大 
房产 公司 也 只 需要 通过 中 介 公 司 来 发 布 房子 信息 。 这 样 一 来 , 我 们 不 用 关心 消息 是 来 自 哪个 房产 
公司 , 我 们 在 意 的 是 能 否 顺 利 收 到 消息 。 当 然 , 为 了 保证 订阅 者 和 发 布 者 能 顺利 通信 ， 订 阅 者 和 
发 布 者 都 必须 知道 这 个 中 介 公 司 。 

同样 在 程序 中 ， 发 布 -订阅 模式 可 以 用 一 个 全 局 的 Event 对 象 来 实现 ， 订 阅 者 不 需要 了 解 消 
息 来 自 哪个 发 布 者 ， 发 布 者 也 不 知道 消息 会 推送 给 哪些 订阅 者 ，Event 作为 一 个 类 似 “ 中 介 者 ” 
的 角色 ， 把 订阅 者 和 发 布 者 联系 起 来 。 见 如 下 代码 : 


var Event = (function(){ 


var clientList = {}, 
listen, 
trigger, 
remove; 


listen = function( key, fn ){ 
if ( !clientList[ key ] ){ 
clientList[ key ] = []; 


} 
clientList[ key ].push( fn ); 
}; 


trigger = function(){ 
var key = Array.prototype.shift.call( arguments )， 

fns = clientList[ key ]; 

if ( !fns || fns.length === 0 ){ 
return false; 

} 

for( var i = 0, fn; fn = fns[ i++ ]; ){ 
fn.apply( this, arguments ); 


remove = function( key, fn ){ 
var fns = clientList[ key ]; 
if ( !fns ){ 
return false; 
} 
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if ( !fn ){ 
fns 8& ( fns.length = 0 ); 
}else{ 
for ( var 1 = fns.length - 1; 1 >=0; 1-- ){ 
var fn = fns[ 1 ]; 


if( fn === fn ){ 
fns.splice( 1, 1 ); 


} 
} 
} 
}; 
return { 
listen: listen, 
trigger: trigger, 
remove: remove 
} 
])(); 
Event.1isten( 'squareMeter88', function( price ){ // 小 红 订 阅 消息 
console.1log(“' 价 格 = ' + price ); // 输出 : “价格 =2000000” 


]); 


Event.trigger( 'squareMeter88'，2000000 ); ”// 售 楼 处 发 布 消息 


8.9 模块 间 通 信 


上 一 节 中 实现 的 发 布 -订阅 模式 的 实现 ， 是 基于 一 个 全 局 的 Event 对 象 ， 我 们 利用 它 可 以 在 
两 个 封装 良好 的 模块 中 进行 通信 , 这 两 个 模块 可 以 完全 不 知道 对 方 的 存在 。 就 如 同 有 了 中 介 公 司 
之 后 ， 我 们 不 再 需要 知道 房子 开 售 的 消息 来 自 哪个 售 楼 处 。 

比如 现在 有 两 个 模块 , a 模块 里 面 有 一 个 按钮 , 每 次 点 击 按钮 之 后 , b 模块 里 的 div 中 会 显示 
按钮 的 总 点 击 次 数 ， 我 们 用 全 局 发 布 -订阅 模式 完成 下 面 的 代码 ， 使 得 a 模块 和 b 模块 可 以 在 保 
持 封装 性 的 前 提 下 进行 通信 。 


<!DOCTYPE html> 
<html> 


<body> 
<button id="count"> 点 我 </button> 
<div id="show"></div> 

</body> 


«script type="text/JavaScript"> 
var a = (function(){ 
var count = 0; 
var button = document.getElementById( 'count' ); 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


120 第 8 章 发 布 -订阅 模式 


button.onclick = function(){ 
Event.trigger( 'add', count++ ); 
} 
}) 0; 


var b = (function(){ 
var div = document.getElementById( 'show' ); 
Event.listen( 'add', function( count ){ 
div.innerHTML = count; 
}); 


DO; 
</script> 
</html> 


但 在 这 里 我 们 要 留意 男 一 个 问题 ， 模 块 之 间 如 果 用 了 太 多 的 全 局 发 布 -订阅 模式 来 通信 ， 那 
么 模块 与 模块 之 间 的 联系 就 被 隐藏 到 了 背后 。 我 们 最 终 会 搞 不 清楚 消息 来 自 哪个 模块 , 或 者 消息 
会 流向 哪些 模块 , 这 又 会 给 我 们 的 维护 带 来 一 些 抵 烦 , 也 许 某 个 模块 的 作用 就 是 暴露 一 些 接口 给 
其 他 模块 调用 。 


8.10 必须 先 订 阅 再 发 布 吗 


我 们 所 了 解 到 的 发 布 -订阅 模式 ， 都 是 订阅 者 必须 先 订 阅 一 个 消息 ， 随 后 才能 接收 到 发 布 者 
发 布 的 消息 。 如 果 把 顺序 反 过 来 ,发 布 者 先 发 布 一 条 消息 ， 而 在 此 之 前 并 没有 对 象 来 订阅 它 , 这 
条 消息 无 疑 将 消失 在 宇宙 中 。 

在 某 些 情况 下 ,我 们 需要 先 将 这 条 消息 保存 下 来 ， 等 到 有 对 象 来 订阅 它 的 时 候 ， 再 重新 把 消 
息 发 布 给 订阅 者 。 就 如 同 QQ 中 的 离线 消息 一 样 ， 离 线 消息 被 保存 在 服务 器 中 ,接收 人 下 次 登录 
上 线 之 后 ， 可 以 重新 收 到 这 条 消息 。 

这 种 需求 在 实际 项 目 中 是 存在 的 ,比如 在 之 前 的 商城 网 站 中 , 获取 到 用 户 信 息 之 后 才能 泻 染 
用 户 导 航模 块 ， 而 获取 用 户 信息 的 操作 是 一 个 ajax 异步 请 求 。 当 ajax 请 求 成 功 返 回 之 后 会 发 布 
一 个 事件 ,在 此 之 前 订阅 了 此 事件 的 用 户 导航 模块 可 以 接收 到 这 些 用 户 信息 。 

但 是 这 只 是 理想 的 状况 ,因为 异步 的 原因 ,我们 不 能 保证 ajax 请 求 返 回 的 时 间 ,， 有 时 候 它 返 
回 得 比较 快 ， 而 此 时 用 户 导 航模 块 的 代码 还 没有 加 载 好 〈 还 没有 订阅 相应 事件 )， 特 别 是 在 用 了 
一 些 模 块 化 惰性 加 载 的 技术 后 , 这 是 很 可 能 发 生 的 事情 。 也 许 我 们 还 需要 一 个 方案 , 使 得 我 们 的 
发 布 -订阅 对 象 拥 有 先 发 布 后 订阅 的 能 

为 了 满足 这 个 需求 , 我 们 要 建立 一 个 存放 离线 事件 的 堆栈 ， 当 事件 发 布 的 时 候 ， 如 果 此 时 还 
没有 订阅 者 来 订阅 这 个 事件 , 我 们 暂时 把 发 布 事件 的 动作 包 右 在 一 个 函数 里 , 这 些 包 装 函 数 将 被 
存 人 堆栈 中 ,等 到 终于 有 对 象 来 订阅 此 事件 的 时 候 ,我 们 将 遍历 堆栈 并 且 依 次 执行 这 些 包 装 函数 ， 
也 就 是 重新 发 布 里 面 的 事件 。 当 然 离线 事件 的 生命 周期 只 有 一 次 ， 就 像 QQ 的 未 读 消息 只 会 被 重 
新 阅读 一 次 ， 所 以 刚才 的 操作 我 们 只 能 进行 一 次 。 
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8.11 全 局 事件 的 命名 冲突 


全 局 的 发 布 -订阅 对 象 里 只 有 一 个 clinetList 来 存放 消息 名 和 回调 函数 ， 大 家 都 通过 它 来 订 
阅 和 发 布 各 种 消息 ， 和 久而久之， 难免 会 出 现 事件 名 冲突 的 情况 ， 所 以 我 们 还 可 以 给 Event 对 象 提 
供 创建 命名 空间 的 功能 。 

在 提供 最 终 的 代码 之 前 ， 我 们 来 感受 一 下 怎么 使 用 这 两 个 新 增 的 功能 。 


/六 六 六 六 六 六 六 六 六 六 六 六 六 阔 先 ,发 布 后 订阅 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 冰 冰冰/ 


Event.trigger( 'click', 1 ); 


Event.listen( 'click', function( a ){ 
console.log( a ); // 输出 : 1 
}); 


Event.create( 'namespace1' ).listen( 'click', function( a ){ 
console.log( a ); // 输出 : 1 
]); 


Event.create( 'namespace1' ).trigger( 'click', 1 ); 


Event.create( 'namespace2' ).listen( 'click', function( a ){ 
console.log( a ); // 输出 : 2 
}); 


Event.create( 'namespace2' ).trigger( 'click', 2 ); 


具体 实现 代码 如 下 : 
var Event = (function(){ 


var global = this, 
Event， 
_default = 'default'; 


Event = function(){ 
var listen, 
_trigger, 
_remove, 
_Slice = Array.prototype.slice, 
_shift = Array.prototype.shift, 
_unshift = Array.prototype.unshift, 
namespaceCache = {}, 
_Create, 
find, 
each = function( ary, fn ){ 
var ret; 
for ( var i = 0, 1 = ary.length; i < 1; i++){ 
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var n = ary[i]; 

ret = fn.call( n, i, n); 
} 
return ret; 


}; 


_listen = function( key, fn, cache ){ 
if ( !cache[ key ] ){ 
cache[ key ] = []; 


} 
cache[key] .push( fn ); 


和 


_remove = function( key, cache ,fn){ 
if ( cache[l key ] ){ 
if( fn ){ 
for( var i = cache[ key ].length; i >= 0; i-- ){ 
if( cache[ key ][i] === fn ){ 
cache[ key ].splice( i, 1 ); 
} 


} 
}else{ 

cache[ key ] = []; 
} 


} 
}; 


_trigger = function(){ 
var cache = shift.call(arguments), 
key = _shift.call(arguments), 
args = arguments, 
_self = this, 
ret, 
stack = cache[ key ]; 


if ( !stack || !stack.length ){ 
return; 
} 


return each( stack, function(){ 
return this.apply( _self, args ); 
}); 
}; 


_create = function( namespace ){ 
var namespace = namespace || default; 
var cache = {}, 
offlineStack = []， // 离线 事件 
ret = { 
listen: function( key, fn, last ){ 
_listen( key, fn, cache ); 
if ( offlineStack === null ){ 
return; 


if ( last === 'last' ){ 
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offlineStack.length && offlineStack.pop()(); 
}else{ 
each( offlineStack, function(){ 
this(); 
}); 
} 


offlineStack = null; 

}), 

one: function( key, fn, last ){ 
_remove( key, cache ); 
this.listen( key, fn ,1last ); 

}), 

remove: function( key, fn ){ 
_remove( key, cache ,fn); 

}), 


trigger: function(){ 
var fn, 
args, 
_self = this; 


_unshift.call( arguments, cache ); 
args = arguments; 
fn = function(){ 
return trigger.apply( _self, args ); 


区 


if ( offlineStack ){ 
return offlineStack.push( fn ); 


return fn(); 
} 
}; 


return namespace ? 
( namespaceCache[ namespace ] ?namespaceCache[ namespace ] : 
namespaceCache[ namespace ] = ret ) 
: ret; 


}; 


return { 
create: create, 
one: function( key,fn, last ){ 
var event = this.create( ); 
event .one( key,fn,1last ); 
}, 
remove: function( key,fn ){ 
var event = this.create( ); 
event .Temove( key,fn ); 
), 
listen: function( key, fn, last ){ 
var event = this.create( ); 
event.listen( key, fn, last ); 
}), 
trigger: function(){ 
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var event = this.create( ); 
event.trigger.apply( this, arguments ); 


3 
}0; 


return Event; 


])(); 


8.12 JavaScript 实现 发 布 - 订 阅 模式 的 便利 性 


这 里 要 提出 的 是 ， 我 们 一 直 讨 论 的 发 布 -订阅 模式 ， 跟 一 些 别 的 语言 ( 比如 Java ) 中 的 实现 
还 是 有 区 别 的 。 在 Java 中 实现 一 个 自己 的 发 布 -订阅 模式 ,通常 会 把 订阅 者 对 象 自身 当成 引用 传 
人 发 布 者 对 象 中 , 同时 订阅 者 对 象 还 需 提供 一 个 名 为 诸如 update 的 方法 , 供 发 布 者 对 象 在 适合 的 
时 候 调 用 。 而 在 JavaScript 中 , 我 们 用 注册 回调 函数 的 形式 来 代替 传统 的 发 布 -订阅 模式 ， 显 得 更 
加 优雅 和 简单 。 

另外 , 在 JavaScript 中 , 我 们 无 需 去 选择 使 用 推 模型 还 是 拉 模 型 。 推 模型 是 指 在 事件 发 生 时 ， 
发 布 者 一 次 性 把 所 有 更 改 的 状态 和 数据 都 推送 给 订阅 者 。 拉 模型 不 同 的 地 方 是 , 发 布 者 仅仅 通知 
订阅 者 事件 已 经 发 生 了 , 此 外 发 布 者 要 提供 一 些 公开 的 接口 供 订阅 者 来 主动 拉 取 数据 。 拉 模型 的 
好 处 是 可 以 让 订阅 者 “ 按 需 获取 ”， 但 同时 有 可 能 让 发 布 者 变 成 一 个 “门户 大 开 ” 的 对 象 ， 同 时 
增加 了 代码 量 和 复杂 度 。 

刚好 在 JavaScript 中 , arguments 可 以 很 方便 地 表示 参数 列表 , 所 以 我 们 一 般 都 会 选择 推 模型 ， 
使 用 Function.prototype.apply 方法 把 所 有 参数 都 推送 给 订阅 者 。 


8.13 ”小结 


本 童 我 们 学 习 了 发 布 - 订 阅 模式 , 也 就 是 常 说 的 观察 者 模式 。 发 布 -订阅 模式 在 实际 开发 中 非 
党 有用。 

发 布 -订阅 模式 的 优点 非常 明显 ， 一 为 时 间 上 的 解 厢 ， 二 为 对 象 之 间 的 解 看。 它 的 应 用 非常 
广泛 ， 既 可 以 用 在 异步 编程 中 ， 也 可 以 帮助 我 们 完成 更 松 耦 合 的 代码 编写 。 发 布 -订阅 模式 还 可 
以 用 来 帮助 实现 一 些 别 的 设计 模式 , 比如 中 介 者 模式 。 从 架构 上 来 看 ,无 论 是 MVC 还 是 MVVM，， 
都 少不了 发 布 -订阅 模式 的 参与 ， 而 且 JavaScript 本 身 也 是 一 门 基 于 事件 驱动 的 语言 。 

当然 ， 发 布 -订阅 模式 也 不 是 完全 没有 缺点 。 创 建 订阅 者 本 身 要 消耗 一 定 的 时 间 和 内 存 ， 而 
且 当 你 订阅 一 个 消息 后 ， 也 许 此 消息 最 后 都 未 发 生 ， 但 这 个 订阅 者 会 始终 存在 于 内 存 中 。 另 外 ， 
发 布 -订阅 模式 虽然 可 以 弱化 对 象 之 间 的 联系 ， 但 如 果 过 度 使 用 的 话 ， 对 象 和 对 象 之 间 的 必要 联 
系 也 将 被 深 埋 在 背后 , 会 导致 程序 难以 跟踪 维护 和 理解 。 特 别 是 有 多 个 发 布 者 和 订阅 者 恋 套 到 一 
起 的 时 候 ， 要 跟踪 一 个 bug 不 是 件 轻松 的 事 ' 
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假设 有 一 个 快餐 店 ， 而 我 是 该 餐厅 的 点 餐 服 务 员 , 那么 我 一 天 的 工作 应 该 是 这 样 的 : 当 某 位 
客人 点 餐 或 者 打 来 订餐 电话 后 , 我 会 把 他 的 需求 都 写 在 清单 上 , 然后 交 给 厨房 ， 客人 不 用 关心 是 
哪些 厨师 帮 他 炒菜 。 我 们 餐厅 还 可 以 满足 客人 需要 的 定时 服务 ,比如 客人 可 能 当前 正在 回 家 的 路 
上 ,要求 1 个 小 时 后 才 开 始 炒 他 的 菜 ， 只 要 订单 还 在 ,厨师 就 不 会 忘记 。 客 人 也 可 以 很 方便 地 打 
电话 来 撤销 订单 。 另 外 如 果 有 太 多 的 客人 点 餐 ， 厨 房 可 以 按照 订单 的 顺序 排队 炒菜 。 


这 些 记录 着 订餐 信息 的 清单 ， 便 是 命令 模式 中 的 命令 对 象 。 


9.1 命令 模式 的 用 途 


命令 模式 是 最 简单 和 优雅 的 模式 之 一 , 命令 模式 中 的 命令 (command ) 指 的 是 一 个 执行 某 些 


命令 模式 最 常见 的 应 用 场景 是 : 有 时 候 需要 向 某 些 对 象 发 送 请 求 , 但 是 并 不 知道 请 求 的 接收 
者 是 谁 ， 也 不 知道 被 请 求 的 操作 是 什么 。 此 时 希望 用 一 种 松 看 合 的 方式 来 设计 程序 ,使 得 请 求 发 
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送 者 和 请 求 接收 者 能 够 消除 彼此 之 间 的 耦合 关系 。 

拿 订 餐 来 说 ,客人 需要 向 厨师 发 送 请 求 , 但 是 完全 不 知道 这 些 厨 师 的 名 字 和 联系 方式 ， 也 不 
知道 厨师 炒菜 的 方式 和 步骤 。 命 令 模式 把 客人 订餐 的 请 求 封装 成 command 对 象 ， 也 就 是 订餐 中 的 
订单 对 象 。 这 个 对 象 可 以 在 程序 中 被 四 处 传递 ， 就 像 订单 可 以 从 服务 员 手 中 传 到 厨师 的 手中 。 这 
样 一 来 ， 客 人 不 需要 知道 厨师 的 名 字 ， 从 而 解 开 了 请 求 调 用 者 和 请 求 接收 者 之 间 的 耦合 关系 。 


另外 ， 相 对 于 过 程 化 的 请 求 调 用 ，command 对 象 拥有 更 长 的 生命 周期 。 对 象 的 生命 周期 是 跟 
初始 请 求 无 关 的 , 因为 这 个 请 求 已 经 被 封装 在 了 command 对 象 的 方法 中 , 成 为 了 这 个 对 象 的 行为 。 
我 们 可 以 在 程序 运行 的 任意 时 刻 去 调用 这 个 方法 , 就 像 厨 师 可 以 在 客人 预定 1 个 小 时 之 后 才 帮 他 
人 炒菜， 相当 于 程序 在 1 个 小 时 之 后 才 开始 执行 command 对 象 的 方法 。 


除了 这 两 点 之 外 ， 命 令 模 式 还 支持 撤销 、 排 队 等 操作 ， 本 章 稍 后 将 会 详细 讲解 。 
9.2 命令 模式 的 例子 一 一 菜单 程序 

假设 我 们 正在 编写 一 个 用 户 界面 程序 ， 该 用 户 界面 上 至 少 有 数 十 个 Button 按钮 。 因 为 项 目 
比较 复杂 ,所 以 我 们 决定 让 某 个 程序 员 负 责 绘制 这 些 按 钮 , 而 男 外 一 些 程序 员 则 负责 编写 点 击 按 
钮 后 的 具体 行为 ， 这 些 行为 都 将 被 封装 在 对 象 里 。 

在 大 型 项 目 开 发 中 , 这 是 很 正常 的 分 工 。 对 于 绘制 按钮 的 程序 员 来 说 ， 他 完全 不 知道 某 个 按 
钮 未 来 将 用 来 做 什么 ,可 能 用 来 刷新 菜单 界面 ,也 可 能 用 来 增加 一 些 子 菜单 , 他 只 知道 点 击 这 个 
按钮 会 发 生 某 些 事情 。 那 么 当 完成 这 个 按钮 的 绘制 之 后 ， 应 该 如 何 给 它 绑 定 onclick 事件 呢 ? 

回想 一 下 命令 模式 的 应 用 场景 : 

有 时 候 需 要 向 某 些 对 象 发 送 请 求 ,， 但 是 并 不 知道 请 求 的 接收 者 是 谁 ， 也 不 知道 被 请 
求 的 操作 是 什么 , 此 时 希望 用 一 种 松 耦 合 的 方式 来 设计 软件 ,使 得 请 求 发 送 者 和 请 求 接 
收 者 能 够 消除 彼此 之 间 的 耦合 关系 。 


我 们 很 快 可 以 找到 在 这 里 运用 命令 模式 的 理由 : 点 击 了 按钮 之 后 , 必须 向 某 些 负责 具体 行为 
的 对 象 发 送 请 求 ， 这 些 对 象 就 是 请 求 的 接收 者 。 但 是 目前 并 不 知道 接收 者 是 什么 对 象 ， 也 不 知道 
接收 者 完 竟 会 做 什么 。 此 时 我 们 需要 借助 命令 对 象 的 帮助 ,以 便 解 开 按钮 和 负责 具体 行为 对 象 之 
间 的 耦合 。 

设计 模式 的 主题 总 是 把 不 变 的 事物 和 变化 的 事物 分 离开 来 ,命令 模式 也 不 例外 。 按 下 按钮 之 
后 会 发 生 一 些 事情 是 不 变 的 ， 而 具体 会 发 生 什么 事情 是 可 变 的 。 通 过 command 对 象 的 帮助 ， 将 来 
我 们 可 以 轻易 地 改变 这 种 关联 ， 因 此 也 可 以 在 将 来 再 次 改变 按钮 的 行为 。 

下 面 进入 代码 编写 阶段 ， 首 先 在 页 面 中 完成 这 些 按钮 的 “绘制 "; 


<body> 
<button id="button1"> 点 击 按钮 1</button> 


一 
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<button id="button2"> 点 击 按钮 2</button> 
<button id="button3"> 点 击 按钮 3</button> 
</body> 


<script> 
var button1 = document.getElementById( 'button1' ), 
var button2 = document.getElementById( 'button2' ), 
var button3 = document.getElementById( 'button3' ); 
</script> 


接 下 来 定义 setCommand 函数 ，setCommand 函数 负责 往 按钮 上 面 安装 命令 。 


可 以 肯定 的 是 ,点 


击 按钮 会 执行 某 个 command 命令 ， 执 行 命令 的 动作 被 约定 为 调用 command 对 象 的 execute() 方 法 。 


Le 


TT 


IDS 


日 


var setCommand = function( button, command ){ 
button.onclick = function(){ 
command.execute(); 
} 


}; 


然 还 不 知道 这 些 命 令 究竟 代表 什么 操作 , 但 负责 绘制 按钮 的 程序 员 不 关心 这 些 事情 , 他 只 需要 
预 留 好 安装 命令 的 接口 ，command 对 象 自然 知道 如 何 和 正确 的 对 象 沟 通 : 


最 后 , 负责 编写 点 击 按钮 之 后 的 具体 行为 的 程序 员 总 算 交 上 了 他 们 的 成 果 , 他 们 完成 了 刷新 
菜单 界面 、 增 加 子 菜单 和 删除 子 菜单 这 几 个 功能 ， 这 几 个 功能 被 分 布 在 MenuBar 和 SubMenu 这 两 
个 对 象 中 : 


var MenuBar = { 
refresh: function(){ 
console.10g( “刷新 菜单 目录 ); 
} 


上 


var SubMenu = { 
add: function(){ 
console.1og( “增加 子 菜单 ); 
}, 
del: function(){ 
console.log(' 删 除 子 菜单 '，); 
} 


Bs 


在 让 button 变 得 有 用 起 来 之 前 ， 我 们 要 先 把 这 些 行为 都 封装 在 命令 类 中 : 


var RefreshMenuBarCommand = function( receiver ){ 
this.receiver = receiver; 
}; 


RefreshMenuBarCommand.prototype.execute = function(){ 
this.receiver.refresh(); 


}; 


var AddSubMenuCommand = function( receiver ){ 
this.receiver = receiver; 
}; 
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AddSubMenuCommand.prototype.execute = function(){ 
this.receiver.add(); 


中 


var DelSubMenuCommand = function( receiver ){ 
this.receiver = receiver; 


局 


DelSubMenuCommand.prototype.execute = function(){ 
console.1og( “删除 子 菜单 ' ); 
}; 


最 后 就 是 把 命令 接收 者 传人 到 command 对 象 中 ， 并 且 把 command 对 象 安装 到 button 上 面 : 
var refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar ); 


var addSubMenuCommand = new AddSubMenuCommand( SubMenu ); 
var delSubMenuCommand = new DelSubMenuCommand( SubMenu ); 


setCommand( button1, refreshMenuBarCommand ); 
setCommand( button2, addSubMenuCommand ); 
setCommand( button3, delSubMenuCommand ); 


以 上 只 是 一 个 很 简单 的 命令 模式 示例 , 但 从 中 可 以 看 到 我 们 是 如 何 把 请 求 发 送 者 和 请 求 接收 
者 解 耦 开 的 。 


9.3 JavaScript 中 的 命令 模式 


也 许 我 们 会 感到 很 奇怪 ， 所 谓 的 命令 模式 ， 看 起 来 就 是 给 对 象 的 某 个 方法 取 了 execute 的 名 
字 。 引 入 command 对 象 和 receiver 这 两 个 无 中 生 有 的 角色 无 非 是 把 简单 的 事情 复杂 化 了 ， 即 使 不 
用 什么 模式 ， 用 下 面 寥寥 几 行 代码 就 可 以 实现 相同 的 功能 : 


var bindClick = function( button, func ){ 
button.onclick = func; 


}3 


var MenuBar = { 
refresh: function(){ 
console.10g( “刷新 菜单 界面 "” ); 
} 


}; 


var SubMenu = { 
add: function(){ 
console.log(' 增 加 子 菜单 '，); 
}, 
del: function(){ 
console.1og(“ 删 除 子 菜单 ' ); 


bindClick( button1, MenuBar.refresh ); 
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bindClick( button2, SubMenu.add ); 
bindClick( button3, SubMenu.del ); 


这 种 说 法 是 正确 的 ，9.2 节 中 的 示例 代码 是 模拟 传统 面向 对 象 语言 的 命令 模式 实现 。 合 令 模 
式 将 过 程式 的 请 求 调用 封装 在 command 对 象 的 execute 方法 里 ， 通 过 封装 方法 调用 ， 我 们 可 以 把 
运算 块 包装 成 形 。command 对 象 可 以 被 四 处 传递 ， 所 以 在 调用 命令 的 时 候 ， 客 户 〈 Client ) 不 需要 
关心 事情 是 如 何 进行 的 。 

命令 模式 的 由 来 ， 其 实 是 回调 ( callback ) 函数 的 一 个 面向 对 象 的 替代 品 。 

JavaScript 作为 将 函数 作为 一 等 对 象 的 语言 ， 跟 策略 模式 一 样 ， 命 令 模 式 也 早已 融和 人 到 了 
JavaScript 语 言 之 中 。 运算 块 不 一 定 要 封装 在 command.execute 方法 中 , 也 可 以 封装 在 普通 函数 中 。 


函数 作为 一 等 对 象 ， 本 身 就 可 以 被 四 处 传递 。 即 使 我 们 依然 需要 请 求 “ 接 收 者 ”， 那 也 未 必 使 用 
面向 对 象 的 方式 ， 闭 包 可 以 完成 同样 的 功能 。 


在 面向 对 象 设 计 中 ， 命 令 模 式 的 接收 者 被 当成 command 对 象 的 属性 保存 起 来 ， 同 时 约定 执行 
命令 的 操作 调用 command.execute 方法 。 在 使 用 闭 包 的 命令 模式 实现 中 ， 接 收 者 被 封闭 在 闭 包产 
生 的 环境 中 ,执行 命令 的 操作 可 以 更 加 简单 ,仅仅 执行 回调 函数 即 可 。 无 论 接 收 者 被 保存 为 对 象 
的 属性 ， 还 是 被 封闭 在 闭 包产 生 的 环境 中 , 在 将 来 执行 命令 的 时 候 ， 接 收 者 都 能 被 顺利 访问 。 用 
闭 包 实现 的 命令 模式 如 下 代码 所 示 : 


var setCommand = function( button, func ){ 
button.onclick = function(){ 
func(); 
i 


和 


var MenuBar = { 
refresh: function(){ 
console.10g( “刷新 菜单 界面 " ); 
} 


}; 


var RefreshMenuBarCommand = function( receiver ){ 
return function(){ 
receiver.refresh(); 
} 


}; 
var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar ); 


setCommand( button1, refreshMenuBarCommand ); 
当然 ， 如 果 想 更 明确 地 表达 当前 正在 使 用 命令 模式 , 或 者 除了 执行 命令 之 外 , 将 来 有 可 能 还 
要 提供 撤销 命令 等 操作 。 那 我 们 最 好 还 是 把 执行 函数 改 为 调用 execute 方法 : 
var RefreshMenuBarCommand = function( receiver ){ 
return { 


execute: function(){ 
receiver.refresh(); 
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及 


var setCommand = function( button, command ){ 
button.onclick = function(){ 
command .execute(); 
} 


}; 


var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar ); 
setCommand( button1, refreshMenuBarCommand ); 


9.4 ”撤销 命令 


命令 模式 的 作用 不 仅 是 封装 运算 块 , 而且 可 以 很 方便 地 给 命令 对 象 增加 撤销 操作 。 就 像 订餐 
时 客人 可 以 通过 电话 来 取消 订单 一 样 。 下 面 来 看 撤销 命令 的 例子 。 
本 市 的 目标 是 利用 5.4 方 中 的 Animate 类 来 编写 一 个 动画 ， 这 个 动画 的 表现 是 让 页 面 上 的 小 
球 移 动 到 水 平方 向 的 某 个 位 置 。 现 在 页 面 中 有 一 个 input 文本 框 和 一 个 button 按钮 ， 文 本 框 中 可 
以 输入 一 些 数字 , 表示 小 球 移动 后 的 水 平 位 置 , 小 球 在 用 户 点 击 按钮 后 立刻 开始 移动 , 代码 如 下 : 


<body> 
<div id="ball" style="position:absolute;background:#000;width:50px;height:50px"></div> 
输入 小 球 移动 后 的 位 置 : 《input id="pos"/> 
<button id="moveBtn"> 开 始 移 动 </button> 

</body> 


<script> 
var ball = document.getElementById( 'ball' ); 
var pos = document.getElementById( 'pos' ); 
var moveBtn = document.getElementById( 'moveBtn' ); 


moveBtn.onclick = function(){ 
var animate = new Animate( ball ); 
animate.start( 'left', pos.value, 1000, 'strongEaseOut' ); 


; 
</script> 


如 有 果 文 本 框 输入 200， 然 后 点 击 moveBtn 按钮 ， 可 以 看 到 小 球 顺利 地 移动 到 水 平方 向 200px 
的 位 置 。 现 在 我 们 需要 一 个 方法 让 小 球 还 原 到 开始 移动 之 前 的 位 置 。 当 然 也 可 以 在 文本 框 中 再 次 
输入 -200, 并 且 点 击 moveBtn 按钮 , 这 也 是 一 个 办 法 ,不 过 显得 很 笨拙 。 页 面 上 最 好 有 一 个 撤销 
按钮 ， 点 击 撤销 按钮 之 后 ， 小 球 便 能 回 到 上 一 次 的 位 置 。 


在 给 页 面 中 增加 撤销 按钮 之 前 ， 先 把 目前 的 代码 改 为 用 命令 模式 实现 : 


var ball = document.getElementById( 'ball' ); 
var pos = document.getElementById( 'pos' ); 
var moveBtn = document.getElementById( 'moveBtn' ); 
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var MoveCommand = function( receiver, pos ){ 
this.receiver = receiver; 
this.pos = pos; 


}; 


MoveCommand.prototype.execute = function(){ 
this.receiver.start( 'left', this.pos, 1000, 'strongEaseOut' ); 


}; 
var moveCommand; 


moveBtn.onclick = function(){ 
var animate = new Animate( ball ); 
moveCommand = new MoveCommand( animate, pos.value ); 
moveCommand.execute(); 


}; 
接 下 来 增加 撤销 按钮 : 
<body> 


<div id="ball" style="position:absolute;background:#000;width:50px;height:50px"></div> 
输入 小 球 移动 后 的 位 置 : xinput id="pos"/> 
<button id="moveBtn"> 开 始 移 动 </button> 
<button id="cancelBtn">cancel</cancel> <1-- 增 加 取消 按钮 --> 
</body> 


撤销 操作 的 实现 一 般 是 给 命令 对 和 象 增加 一 个 名 为 unexecude 或 者 undo 的 方法 , 在 该 方法 里 执 
行 execute 的 反 向 操作 。 在 command.execute 方法 让 小 球 开始 真正 运动 之 前 , 我 们 需要 先 记录 小 球 
的 当前 位 置 ， 在 unexecude 或 者 undo 操作 中 ， 再 让 小 球 回 到 刚刚 记录 下 的 位 置 ， 代 码 如 下 : 
<script> 
var ball = document.getElementById( 'ball' ); 
var pos = document.getElementById( 'pos' ); 


var moveBtn = document.getElementById( 'moveBtn' ); 
var cancelBtn = document.getElementById( 'cancelBtn' ); 


Var MoveCommand = function( receiver, pos ){ 
this.receiver = receiver; 
this.pos = pos; 
this.oldPos = null; 

}; 


MoveCommand.prototype.execute = function(){ 
this.receiver.start( 'left', this.pos, 1000, 'strongEaseOut' ); 
this.oldPos = this.receiver.dom.getBoundingClientRect()[ this.receiver.propertyName ]; 
// 记录 小 球 开始 移动 前 的 位 置 

}; 


MoveCommand.prototype.undo = function(){ 
this.receiver.start( 'left', this.oldPos, 1000, 'strongEaseOut' ); 
// 回 到 小 球 移动 前 记录 的 位 置 

}; 


var moveCommand; 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


132 第 9 章 命令 模式 


moveBtn.onclick = function(){ 
var animate = new Animate( ball ); 
moveCommand = new MoveCommand( animate, pos.value ); 
moveCommand.execute(); 


}; 
cancelBtn.onclick = function(){ 
moveCommand.undo(); // 撤销 命令 
}; 
</script> 


现在 通过 命令 模式 轻松 地 实现 了 撤销 功能 。 如果 用 普通 的 方法 调用 来 实现 , 也 许 需 要 每 次 都 
手工 记录 小 球 的 运动 轨迹 , 才能 让 它 还 原 到 之 前 的 位 置 。 而 命令 模式 中 小 球 的 原始 位 置 在 小 球 开 
台 移 动 前 已 经 作为 command 对 象 的 属性 被 保存 起 来 ,所 以 只 需要 再 提供 一 个 undo 方 法 ,并 且 在 undo 
方法 中 让 小 球 回 到 刚刚 记录 的 原始 位 置 就 可 以 了 。 

撤销 是 命令 模式 里 一 个 非常 有 用 的 功能 , 试想 一 下 开发 一 个 围棋 程序 的 时 候 , 我 们 把 每 一 步 
棋子 的 变化 都 封装 成 命令 ， 则 可 以 轻而易举 地 实现 悔 棋 功能 。 同 样 ， 撤 销 命令 还 可 以 用 于 实现 文 
本 编辑 器 的 Ctrl+Z 功能 。 


9.5 ”撤消 和 重 做 


上 一 节 我 们 讨论 了 如 何 撤销 一 个 命令 。 很 多 时 候 , 我 们 需要 撤销 一 系列 的 命令 。 比 如 在 一 个 
围棋 程序 中 ， 现 在 已 经 下 了 10 步 棋 ， 我 们 需要 一 次 性 悔 棋 到 第 5 步 。 在 这 之 前 ， 我 们 可 以 把 所 
有 执行 过 的 下 棋 命 令 都 储存 在 一 个 历史 列表 中 ,然后 倒序 循环 来 依次 执行 这 些 命令 的 undo 操作 ， 
直到 循环 执行 到 第 5 个 命令 为 止 。 

然而 , 在 某 些 情况 下 无 法 顺利 地 利用 undo 操作 让 对 象 回 到 execute 之 前 的 状态 。 比 如 在 一 个 
Canvas 画图 的 程序 中 ， 画 布 上 有 一 些 点 ， 我 们 在 这 些 点 之 间 画 了 N 条 曲线 把 这 些 点 相互 连接 起 
来 ,当然 这 是 用 命令 模式 来 实现 的 。 但 是 我 们 却 很 难为 这 里 的 命令 对 象 定义 一 个 擦 除 某 条 曲线 的 
undo 操作 ， 因 为 在 Canvas 画图 中 ， 擦 除 一 条 线 相对 不 容易 实现 。 

这 时 候 最 好 的 办 法 是 先 清除 画布 ， a 这 一 点 同样 
可 以 利用 一 个 历史 列表 堆栈 办 到 。 记 录 命 令 日 志 , 然后 重复 执行 它们 ,这 是 逆转 不 可 道 命令 的 一 
个 好 办 法 。 

在 我 编写 的 HTMLS5 版 《街头 霸王 》 游 戏 中 ,命令 模式 可 以 用 来 实现 播放 录像 功能 。 原 理 跟 
Canvas 画图 的 例子 一 样 , 我 们 把 用 户 在 键盘 的 输入 都 封装 成 命令 , 执行 过 的 命令 将 被 存放 到 堆栈 
中 。 播 放 录 像 的 时 候 只 需要 从 头 开始 依次 执行 这 些 命令 便 可 ， 代 码 如 下 : 


<html> 
<body> 
<button id="replay"> 播 放 录 像 </button> 
</body> 
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<script> 
var Ryu = { 

attack: function(){ 
console.log( ' 攻 击 ' ); 

}), 

defense: function(){ 
console.log(“' 防 御 ' ); 

}), 

jump: function(){ 
console.1og(“ 跳 跃 ' ); 

}), 

crouch: function(){ 
console.1og(“ 下 下 ' ); 


} 
}; 
var makeCommand = function( receiver, state ){ // 创建 命令 
return function(){ 
receiver[ state ](); 
} 
}; 


var commands = { 
"119": "jump", //W 
"115": "crouch", //S 
"97": "defense", // A 
"100": "attack" // D 


}; 
var commandStack = []; // 保存 命令 的 堆栈 


document .onkeypress = function( ev ){ 
var keyCode = ev.keyCode, 
command = makeCommand( Ryu, commands{[ keyCode ] ); 


if ( command ){ 
command(); // 执行 命令 
commandStack.push( command ); // 将 刚刚 执行 过 的 命令 保存 进 堆栈 
} 
}; 


document.getElementById( 'replay' ).onclick = function(){ // 点 击 播放 录像 
var command; 
while( command = commandStack.shift() ){ // 从 堆栈 里 依次 取出 命令 并 执行 


command(); 
} 
}; 
</script> 
</html> 


可 以 看 到 ， 当 我 们 在 键盘 上 获 下 W、A、S、D 这 儿 个 键 来 完成 一 些 动作 之 后 , 再 按 下 Replay 
按钮 ， 此 时 便 会 重复 播放 之 前 的 动作 。 
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9.6 命令 队列 


在 订餐 的 故事 中 , 如果 订单 的 数量 过 多 而 厨师 的 人 手 不 够 , 则 可 以 让 这 些 订单 进行 排队 处 理 。 
第 一 个 订单 完成 之 后 ， 再 开始 执行 跟 第 二 个 订单 有 关 的 操作 。 

队列 在 动画 中 的 运用 场景 也 非常 多 ， 比 如 之 前 的 小 球 运动 程序 有 可 能 遇 到 另外 一 个 问题 : 有 
些 用 户 反馈 ,这 个 程序 只 适合 于 APM 小 于 20 的 人 群 ,大 部 分 用 户 都 有 快速 连续 点 击 按钮 的 习惯 ， 
当 用 户 第 二 次 点 击 button 的 时 候 , 此 时 小 球 的 前 一 个 动画 可 能 尚未 结束 , 于 是 前 一 个 动画 会 又 然 
停止 ,小 球 转 而 开始 第 二 个 动画 的 运动 过 程 。 但 这 并 不 是 用 户 的 期 望 ， 用 户 希望 这 两 个 动画 会 排 
队 进 行 。 

把 请 求 封装 成 命令 对 象 的 优点 在 这 里 再 次 体现 了 出 来 , 对象 的 生命 周期 几乎 是 永久 的 , 除非 
我 们 主动 去 回收 它 。 也 就 是 说 ， 命 令 对 象 的 生命 周期 跟 初 始 请 求 发 生 的 时 间 无 关 ，command 对 象 
的 execute 方 法 可 以 在 程序 运行 的 任何 时 刻 执行 ， 即 使 点 击 按钮 的 请 求 早已 发 生 ， 但 我 们 的 命令 
对 象 仍然 是 有 生命 的 。 

所 以 我 们 可 以 把 div 的 这 些 运 动 过 程 都 封装 成 命令 对 象 ， 再 把 它们 压 进 一 个 队列 堆栈 ， 当 动 
画 执行 完 ， 也 就 是 当前 command 对 象 的 职责 完成 之 后 ， 会 主动 通知 队列 ， 此 时 取出 正在 队列 中 等 
待 的 第 一 个 命令 对 象 ， 并 且 执 行 它 。 

我 们 比较 关注 的 问题 是 , 一 个 动画 结束 后 该 如 何 通知 队 列 。 通 常 可 以 使 用 回调 函数 来 通知 队 
列 ， 除 了 回调 函数 之 外 ， 还 可 以 选择 发 布 -订阅 模式 。 即 在 一 个 动画 结束 后 发 布 一 个 消息 ， 订 阅 
者 接收 到 这 个 消息 之 后 , 便 开始 执行 队列 里 的 下 一 个 动画 。 读者 可 以 尝试 按照 这 个 思路 来 自行 实 
现 一 个 队列 动画 。 


9.7” 宏 命令 


宏 命 令 是 一 组 命令 的 集合 , 通过 执行 宏 命 令 的 方式 ， 可 以 一 次 执行 一 批 命令 。 想 象 一 下 ,家 
里 有 一 个 万 能 遥控 需 ,每 天 回 家 的 时 候 ， 只 要 按 一 个 特别 的 按钮 ， 它 就 会 帮 我 们 关上 房间 门 ， 顺 
便 打 开 电 脑 并 登录 QQ。 

下 面 我 们 看 看 如 何 逐 步 创建 一 个 宏 命 令 。 首 先 ， 我 们 依然 要 创建 好 各 种 Command: 


var closeDoorCommand = { 
execute: function(){ 
console.log(' 关 门 ' ); 
} 


}; 


var openPcCommand = { 
execute: function(){ 
console.1og(“ 开 电脑 ” )j 
} 
}; 
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var openQQCommand = { 
execute: function(){ 
console.log(' 登 录 00' ); 


}; 

接 下 来 定义 宏 命 令 MacroCommand, 它 的 结构 也 很 简单 。 macroCommand.add 方法 表示 把 子 命令 添 
加 进 宏 命令 对 象 ， 当 调用 宏 命令 对 象 的 execute 方法 时 ， 会 迭代 这 一 组 子 命令 对 象 ， 并 且 依 次 执 
行 它们 的 execute 方法 : 


var MacroCommand = function(){ 
return { 
commandsList: []， 
add: function( command ){ 
this.commandsList.push( command ); 
}), 
execute: function(){ 
for ( var i = 0, command; command = this.commandsList[ i++ ]; ){ 
command.execute(); 
} 
} 
} 
}; 


var macroCommand = MacroCommand(); 

macroCommand.add( closeDoorCommand ); 

macroCommand.add( openPcCommand ); 

macroCommand.add( openQQOCommand ); 

macroCommand.execute(); 

当然 我 们 还 可 以 为 宏 命令 添加 撤销 功能 ， 跟 macroCommand.execute 类 似 ， 当 调用 
macroCommand.undo 方法 时 ， 宏 命令 里 包含 的 所 有 子 命令 对 象 要 依次 执行 各 自 的 undo 操作 。 


宏 命 令 是 命令 模式 与 组 合 模式 的 联 用 产物 , 关于 组 合 模式 的 知识 , 我 们 将 在 第 10 章 详 细 介绍 。 
9.8 智能 命令 与 傻瓜 命令 


再 看 一 下 我 们 在 9.7 节 创 建 的 命令 : 


var closeDoorCommand = { 
execute: function(){ 
console.1og(“ 关 门 ”); 
} 


}; 

很 奇怪 ，closeDoorCommand 中 没有 包含 任何 receiver 的 信息 ， 它 本 身 就 包揽 了 执行 请 求 的 行 
这 跟 我 们 之 前 看 到 的 命令 对 象 都 包含 了 一 个 receiver 是 矛盾 的 。 

一 般 来 说 ,命令 模式 都 会 在 command 对 象 中 保存 一 个 接收 者 来 负责 真正 执行 客户 的 请 求 ， 这 
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种 情况 下 命令 对 象 是 “傻瓜 式 ” 的 ， 它 只 负责 把 客户 的 请 求 转交 给 接收 者 来 执行 ,这 种 模式 的 好 
是 请 求 发 起 者 和 请 求 接收 者 之 间 尽 可 能 地 得 到 了 解 耦 。 

但 是 我 们 也 可 以 定义 一 些 更 “聪明 ”的 命令 对 象 ,“ 聪 明 ” 的 命令 对 象 可 以 直接 实现 请 求 ， 
这 样 一 来 就 不 再 需要 接收 者 的 存在 ， 这 种 “聪明 ”的 命令 对 象 也 叫 作 智能 命令 。 没 有 接收 者 的 智 
能 命令 , 退化 到 和 策略 模式 非常 相近 ， 从 代码 结构 上 已 经 无 法 分 辨 它们 ,能 分 辨 的 只 有 它们 意图 
的 不 同 。 策略 模式 指向 的 问题 域 更 小 ， 所 有 策略 对 象 的 目标 总 是 一 致 的 ,它们 只 是 达到 这 个 目标 
的 不 同 手段 , 它们 的 内 部 实现 是 针对 “算法 ”而 言 的 。 而 智能 命令 模式 指向 的 问题 域 更 广 , command 
对 象 解决 的 目标 更 具 发 散 性 。 命 令 模式 还 可 以 完成 撤销 、 排 队 等 功能 。 


机 


9.9 小 结 


本 章 我 们 学 习 了 命令 模式 。 跟 许多 其 他 语言 不 同 ，JavaScript 可 以 用 高 阶 函 数 非 常 方 便 地 实 
现 命令 模式 。 命 令 模式 在 JavaScript 语 言 中 是 一 种 隐形 的 模式 。 
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第 10 草 


组 合 模式 


和 小 和 尚 ， 和 人 


关 涩 带 : 


从 前 有 座 山 , WW 
山里 有 


诺 以 


我 们 知道 地 球 和 一 些 其 他 行星 围绕 着 太阳 旋转 , 也 知道 在 一 个 原子 中 , 有 许多 电子 围绕 着 原 


曾经 想象 ,我 们 的 太阳 系 也 许 是 一 个 更 大 世界 里 的 一 个 原子 ,地球 只 是 围绕 着 太阳 


子 核 旋 转 。 我 

原子 的 一 个 电子 。 而 我 身上 的 每 个 原子 又 是 一 个 星系 ,原子核 就 是 这 个 星系 中 的 恒星 ,电子 是 围 
绕 着 恒星 旋转 的 行星 ,一 个 电子 中 也 许 还 包含 了 男 一 个 宇宙 ,虽然 这 个 宇宙 还 不 能 被 显微镜 看 到 ， 
但 我 相信 它 的 存在 。 


也 许 这 个 想法 有 些 异想天开 ,但 在 程序 设计 中 ， 也 有 一 些 和 “事物 是 由 相似 的 子 事物 构成 ” 


类 似 的 思想 。 组 合 模式 就 是 用 小 的 子 对 象 来 构建 更 大 的 对 象 , 而 这 些小 的 子 对 象 本 身 也 许 是 由 更 
小 的 “ 孙 对 象 ”构成 的 。 
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10.1 回顾 宏 命令 


我 们 在 第 9 章 命令 模式 中 讲解 过 宏 命令 的 结构 和 作用 。 宏 命令 对 象 包含 了 一 组 具体 的 子 命令 
对 象 ， 不 管 是 宏 命令 对 象 ， 还 是 子 命令 对 象 ， 都 有 一 个 execute 方法 负责 执行 命令 。 现 在 回顾 一 
下 这 段 安装 在 万 能 遥控 器 上 的 宏 命令 代码 : 

var closeDoorCommand = { 


execute: function(){ 
console.log(' 关 门 ' ); 


} 
局 


var openPcCommand = { 
execute: function(){ 
console.1log(' 开 电脑 ); 
} 
}; 


var openQQCommand = { 
execute: function(){ 
console.log(' 登 录 00' ); 
} 
}; 


var MacroCommand = function(){ 
return { 

commandsList: []， 

add: function( command ){ 
this.commandsList.push( command ); 

}), 

execute: function(){ 
for ( var i = 0, command; command = this.commandsList[ i++ ]; ){ 

command.execute(); 


} 


}; 

var macroCommand = MacroCommand(); 

macroCommand.add( closeDoorCommand ); 

macroCommand.add( openPcCommand ); 

macroCommand.add( openQQCommand ); 

macroCommand.execute(); 

通过 观察 这 段 代码 , 我们 很 容易 发 现 ， 宏 命令 中 包含 了 一 组 子 命 令 , 它们 组 成 了 一 个 树 形 结 
构 ， 这 里 是 一 棵 结构 非常 简单 的 树 ， 如 图 10-1 所 示 。 
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closeDoorCommand openPcCommand openQQCommand 


图 10-1 


其 中 ，marcoCommand 被 称 为 组 合 对 象 ，closeDoorCommand 、openPcCommand 、open00Command 都 是 
叶 对 象 。 在 macroCommand 的 execute 方法 里 , 并 不 执行 真正 的 操作 , 而 是 遍历 它 所 包含 的 叶 对 象 ， 
把 真正 的 execute 请 求 委托 给 这 些 叶 对 象 。 
macroCommand 表现 得 像 一 个 命令 , 但 它 实 际 上 只 是 一 组 真正 命令 的 “代理 ”。 并 非 真 正 的 代理 ， 
虽然 结构 上 相似 , 但 macroCcommand 只 负责 传递 请 求 给 叶 对 象 , 它 的 目的 不 在 于 控制 对 叶 对 象 的 访问 。 


10.2 ”组合 模式 的 用 途 


组 合 模式 将 对 象 组 合成 树 形 结构 ， 以 表示 “部 分 -整体 ”的 层次 结构 。 除 了 用 来 表示 树 形 结 
构 之 外 , 组 合 模式 的 另 一 个 好 处 是 通过 对 象 的 多 态 性 表现 , 使 得 用 户 对 单个 对 象 和 组 合 对 象 的 使 
用 具有 一 致 性 ， 下 面 分 别 说 明 。 
口 表示 树 形 结构 。 通 过 回顾 上 面 的 例子 ， 我 们 很 容易 找到 组 合 模式 的 一 个 优点 : 提供 了 一 
种 遍历 树 形 结构 的 方案 , 通过 调用 组 合 对 象 的 execute 方法, 程序 会 递归 调用 组 合 对 象 下 
面 的 叶 对 象 的 execute 方法 , 所 以 我 们 的 万 能 遥控 器 只 需要 一 次 操作 , 便 能 依次 完成 关门 、 
打开 电脑 、 登 录 QQ 这 几 件 事情 。 组 合 模式 可 以 非常 方便 地 描述 对 象 部 分 -整体 层次 结构 。 
口 利用 对 象 多 态 性 统一 对 待 组 合 对 象 和 单个 对 象 。 利 用 对 象 的 多 态 性 表现 ， 可 以 使 客户 端 
忽略 组 合 对 象 和 单个 对 象 的 不 同 。 在 组 合 模式 中 ， 客 户 将 统一 地 使 用 组 合 结构 中 的 所 有 
对 象 ， 而 不 需要 关心 它 究 竟 是 组 合 对 象 还 是 单个 对 象 。 
这 在 实际 开发 中 会 给 客户 带 来 相当 大 的 便利 性 , 当 我 们 往 万 能 遥控 器 里 面 添加 一 个 命令 的 时 
候 ， 并 不 关心 这 个 命令 是 宏 命令 还 是 普通 子 命令 。 这 点 对 于 我 们 不 重要 , 我 们 只 需要 确定 它 是 一 
个 命令 ， 并 且 这 个 命令 拥有 可 执行 的 execute 方 法 ， 那 么 这 个 命令 就 可 以 被 添加 进 万 能 遥控 器。 
当 宏 命令 和 普通 子 命令 接收 到 执行 execute 方法 的 请 求 时 ， 宏 命令 和 普通 子 命令 都 会 做 它们 
各 自 认 为 正确 的 事情 。 这 些 差 异 是 隐藏 在 客户 背后 的 , 在 客户 看 来 , 这 种 透明 性 可 以 让 我 们 非常 
自由 地 扩展 这 个 万 能 遥控 需 。 


10.3 请求 在 树 中 传递 的 过 程 
在 组 合 模式 中 ， 请 求 在 树 中 传递 的 过 程 总 是 遵循 一 种 逻辑 。 
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以 宏 命令 为 例 ,， 请 求 从 树 最 顶端 的 对 象 往 下 传递 ， 如 果 当 前 处 理 请 求 的 对 象 是 叶 对 象 (普通 
子 命令 ), 叶 对 象 自身 会 对 请 求 作 出 相应 的 处 理 ; 如 果 当 前 处 理 请 求 的 对 象 是 组 合 对 象 ( 宏 命令 )， 
组 合 对 象 则 会 遍历 它 属 下 的 子 节 点 ， 将 请 求 继续 传递 给 这 些 子 节点 。 

总 而 言 之 , 如 果子 节点 是 叶 对 象 , 叶 对 象 自身 会 处 理 这 个 请 求 , 而 如 果子 节点 还 是 组 合 对 象 ， 
请 求 会 继续 往 下 传递 。 叶 对 象 下 面 不 会 再 有 其 他 子 节 点 ， 一 个 叶 对 象 就 是 树 的 这 条 枝叶 的 尽头 ， 


组 合 对 象 下 面 可 能 还 会 有 子 节 点 ， 如 图 10-2 所 示 。 


组 合 对 象 


(hi 条 (nb 条 ) ( 时 对 象 ) 


图 10-2 


请 求 从 上 到 下 沿 着 树 进行 传递 , 直到 树 的 尽头 。 作 为 客户 , 只 需要 关心 树 最 顶层 的 组 合 对 象 ， 
客户 只 需要 请 求 这 个 组 合 对 象 ， 请 求 便 会 沿 着 树 往 下 传递 ， 依 次 到 达 所 有 的 叶 对 象 。 

在 刚刚 的 例子 中 , 由 于 宏 命 令 和 子 命令 组 成 的 树 太 过 简单 , 我 们 还 不 能 清楚 地 看 到 组 合 模式 
带 来 的 好 处 ,如 果 只 是 简单 地 遍历 一 组 子 节 点 ,迭代 带 便 能 解决 所 有 的 问题 。 接 下 来 我 们 将 创造 
一 个 更 强大 的 宏 命 令 , 这 个 宏 命令 中 又 包含 了 另外 一 些 宏 命 令 和 普通 子 命令 , 看 起 来 是 一 棵 相对 
较 复 杂 的 树 。 


10.4 ”更 强大 的 宏 命 令 


目前 的 万 能 遥控 器 ， 包 含 了 关门 、 开 电脑 、 登 录 QQ 这 3 个 命令 。 现 在 我 们 需要 一 个 “超级 
万 能 遥控 需 "， 可 以 控制 家 里 所 有 的 电 融 ， 这 个 遥控 需 拥 有 以 下 功能 : 
口 打开 空调 
口 打开 电视 和 音响 
D 关门 、 开 电脑 、 登 录 QQ 


首先 在 广 点 中 放置 一 个 按钮 button 来 表示 这 个 超级 万 能 遥控 需 , 超级 万 能 遥控 需 上 安装 了 一 
个 宏 命 令 ， 当 执行 这 个 宏 命令 时 ， 会 依次 遍历 执行 它 所 包含 的 子 命令 ， 代 码 如 下 : 
<html> 
<body> 


<button id="button"> 按 我 </button> 
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</body> 
<script> 


var MacroCommand = function(){ 
return { 

commandsList: []， 

add: function( command ){ 
this.commandsList.push( command ); 

)， 

execute: function(){ 
for ( var i = 

command.execute(); 

} 


}; 


var openAcCommand = { 
execute: function(){ 
console.log(' 打 开 空 调 ' ); 
} 


}; 


/六 六 六 六 站 六 站 * 冰 六 家 里 的 电视 和 音响 是 连接 在 一 起 的 ， 所 以 可 以 用 一 个 宏 命 


率 康 案 兴 六 半 水 定案 活 


var openTvCommand = { 
execute: function(){ 
console.10g( “打开 电视 ”); 
} 


var openSoundCommand = { 
execute: function(){ 
console.log(' 打 开 音 响 ' ); 
} 


}; 


var macroCommand1 = MacroCommand(); 
macroCommand1.add( openTvCommand ); 
macroCommand1.add( openSoundCommand ); 


/六 六 六 六 六 六 六 六 闵 关 门 打开 电脑 和 打 登 录 00 的 命 令 半 炒 六 炒米 六 炒米 六 炒米 六 炒米 玉米/ 


var closeDoorCommand = { 
execute: function(){ 
console.1og(“ 关 门 ”); 
} 


}; 


var openPcCommand = { 
execute: function(){ 
console.1og(“ 开 电脑 ” ); 
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0, command; command = this.commandsList[ i++ ]; ){ 


令 来 组 合 打开 电视 和 打开 音响 的 命令 
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} 
下 


var openQQOCommand = { 
execute: function(){ 
console.log(' 登 录 00' ); 
} 
}; 


var macroCommand2 = MacroCommand(); 
macroCommand2.add( closeDoorCommand ); 
macroCommand2.add( openPcCommand ); 
macroCommand2.add( open0OQoCommand ); 


/炒米 六 炒米 闭 炒 六 六 现在 把 所 有 的 命 令 组 合成 一 个 “超级 命 念 2 玉米 玉米 炒米 炒米 炒米 / 
var macroCommand = MacroCommand(); 
macroCommand.add( openAcCommand ); 
macroCommand.add( macroCommand1 ); 


macroCommand.add( macroCommand2 ); 


/六 六 六 六 六 六 六 六 六 最 后 给 还 控 器 绑 定 定 “超级 命令 ”六 六 六 六 六 六 六 六 六 六 / 
var setCommand = (function( command ){ 
document.getElementById( 'button' ).onclick = function(){ 
command.execute(); 


})( macroCommand ); 


</script> 
</html> 


当 按 下 遥控 器 的 按钮 时 ， 所 有 命令 都 将 被 依次 执行 ， 执 行 结果 如 图 10-3 所 示 。 


Q 上 日 Blements Network Sources Timeline Profiles Resources Audits liConsole| 
© 可 top frame> v 


打开 空调 
打开 电视 
打开 音响 
天 问 

开 电 脑 
登录 QQ 


图 10-3 


从 这 个 例子 中 可 以 看 到 , 基本 对 象 可 以 被 组 合成 更 复杂 的 组 合 对 象 ,组 合 对 象 又 可 以 被 组 合 
这 样 不 断 递 归 下 去 ,这 棵 树 的 结构 可 以 支持 任意 多 的 复杂 度 。 在 树 最 终 被 构造 完成 之 后 ， 让 整 颗 
树 最 终 运转 起 来 的 步骤 非常 简单 ， 只 需要 调用 最 上 层 对 象 的 execute 方法 。 每 当 对 最 上 层 的 对 象 
进行 一 次 请 求 时 , 实际 上 是 在 对 整个 树 进 行 深度 优先 的 搜索 ,而 创建 组 合 对 象 的 程序 员 并 不 关心 
这 些 内 在 的 细节 ， 往 这 棵 树 里 面 添加 一 些 新 的 节点 对 象 是 非常 容易 的 事情 。 
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10.5 ”抽象 类 在 组 合 模式 中 的 作用 
前 面 说 到 , 组 合 模 式 最 大 的 优点 在 于 可 以 一 致 地 对 待 组 合 对 象 和 基本 对 象 。 客户 不 需要 知道 


当前 处 理 的 是 宏 命令 还 是 普通 命令 ， 只 要 它 是 一 个 命令 ,并且 有 execute 方法 ， 这 个 命令 就 可 以 
被 添加 到 树 中 。 

这 种 透明 性 带 来 的 便利 ， 在 静态 类 型 语言 中 体现 得 尤为 明显 。 比 如 在 Java 中 ， 实 现 组 合 模 
式 的 关键 是 Composite 类 和 Leaf 类 都 必须 继承 自 一 个 Compenent 抽象 类 。 这 个 Compenent 抽象 类 既 
代表 组 合 对 象 ， 又 代表 叶 对 象 , 它 也 能 够 保证 组 合 对 象 和 叶 对 和 象 拥有 同样 名 字 的 方法 ,从 而 可 以 
对 同一 消息 都 做 出 反馈 。 组 合 对 象 和 叶 对 象 的 具体 类 型 被 隐藏 在 Compenent 抽象 类 身后 。 

针对 Compenent 抽象 类 来 编写 程序 , 客户 操作 的 始终 是 Compenent 对 象 , 而 不 用 去 区 分 到 底 是 
组 合 对 象 还 是 叶 对 象 。 所 以 我 们 往 同一 个 对 象 里 的 add 方 法 里 ， 既 可 以 添加 组 合 对 象 ， 也 可 以 添 
加 叶 对 象 ， 代 码 如 下 : 


// Java 代码 


public abstract class Component{ 
//add 方法， 参数 为 Component 类 型 
public void add( Component child ){} 
//remove 方法 ， 参 数 为 Component 类 型 
public void remove( Component child ){} 


public class Composite extends Component{ 
//add 方法， 参数 为 Component 类 型 
public void add( Component child ){} 
//remove 方法 ， 参 数 为 Component 类 型 
public void remove( Component child ){} 


} 


public class Leaf extends Component{ 
//add 方法， 参数 为 Component 类 型 
public void add( Component child ){ 
throw new UnsupportedOperationException() // 叶 对 象 不 能 再 添加 子 节点 
} 


//remove 方法 ， 参 数 为 Component 类 型 
public void remove( Component child ){ 
} 

} 


public class client(){ 


public static void main( String args[] ){ 
Component root = new Composite(); 


Component c1 
Component c2 


new Composite(); 
new Composite(); 
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Component leaf1 
Component leaf2 


new Leaf(); 
new Leaf(); 


ji— i 


root.add(c1); 
root.add(c2); 


c1.add(leaf1); 
c1.add(leaf2); 


root .remove(); 
} 
} 
然而 在 JavaScript 这 种 动态 类 型 语言 中 ， 对 象 的 多 态 性 是 与 生 俱 来 的 ， 也 没有 编译 需 去 检查 
变量 的 类 型 ， 所 以 我 们 通常 不 会 去 模拟 一 个 “怪异 ”的 抽象 类 ，JavaScript 中 实现 组 合 模式 的 难 
点 在 于 要 保证 组 合 对 象 和 叶 对 象 对 象 拥有 同样 的 方法 , 这 通常 需要 用 有 鸭子 类 型 的 思想 对 它们 进行 
接口 检查 。 


在 JavaScript 中 实现 组 合 模式 ， 看 起 来 缺乏 一 些 严 说 性 ， 我 们 的 代码 算 不 上 安全 ， 但 能 更 快 
速 和 自由 地 开发 ， 这 既是 JavaScript 的 缺点 ， 也 是 它 的 优点 。 


10.6 ”透明 性 带 来 的 安全 问题 


组 合 模 式 的 透明 性 使 得 发 起 请 求 的 客户 不 用 去 顾忌 树 中 组 合 对 象 和 叶 对 象 的 区 别 , 但 它们 在 
本 质 上 有 是 区 别 的 。 


组 合 对 象 可 以 拥有 子 节 点 ， 叶 对 象 下 面 就 没有 子 节 点 ， 所 以 我 们 也 许 会 发 生 一 些 误 操 作 ， 
比如 试图 往 叶 对 象 中 添加 子 节点 。 解决 方案 通常 是 给 叶 对 象 也 增加 add 方 法 ， 并且 在 调用 这 个 方 
法 时 ， 抛 出 一 个 异常 来 及 时 提醒 客户 ， 代 人 码 如 下 : 


var MacroCommand = function(){ 
return { 
commandsList: []， 
add: function( command ){ 
this.commandsList.push( command ); 
}), 


execute: function(){ 
for ( var i = 0, command; command = this.commandsList[ i++ ]; ){ 
command.execute(); 


} 


} 
} 


var openTvCommand = { 
execute: function(){ 
console.log(“' 打 开 电 视 ' ); 
}, 
add: function(){ 
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throw new Error(“' 叶 对 象 不 能 添加 子 节 点 ' ); 
} 
}; 


var macroCommand = MacroCommand(); 


macroCommand.add( openTvCommand ); 
openTvCommand.add( macroCommand ) // Uncaught Error: 叶 对 象 不 能 添加 子 节点 


10.7 组合 模式 的 例子 一 一 扫描 文件 夹 


文件 夹 和 文件 之 间 的 关系 ,非常 适合 用 组 合 模 式 来 描述 。 文 件 夹 里 既 可 以 包含 文件 ， 又 可 以 

包含 其 他 文件 夹 ， 最 终 可 能 组 合成 一 棵 树 ， 组 合 模 式 在 文件 夹 的 应 用 中 有 以 下 两 层 好 处 。 

口 例如 ， 我 在 同事 的 移动 硬盘 里 找到 了 一 些 电 子 书 ， 想 把 它们 复制 到 F 盘 中 的 学 习 资料 文 
件 夹 。 在 复制 这 些 电 子 书 的 时 候 ， 我 并 不 需要 考虑 这 批文 件 的 类 型 ， 不 管 它们 是 单独 的 
电子 书 还 是 被 放 在 了 文件 夹 中 。 组 合 模式 让 CtrlHV 、Ctrl+C 成 为 了 一 个 统一 的 操作 。 

口 当 我 用 杀毒 软件 扫描 该 文件 夹 时 ， 往 往 不 会 关心 里 面 有 多 少 文件 和 子 文件 来， 组 合 模式 
使 得 我 们 只 需要 操作 最 外 层 的 文件 夹 进行 扫描 。 

现在 我 们 来 编写 代码 ， 首 先 分 别 定义 好 文件 夹 Folder 和 文件 File 这 两 个 类 。 见 如 下 代码 : 


于 术 来 束 束 水 义 来 炎 来 事 当 水 来 来 来 可 水 华 来 炎 来 事 林 汪 束 宁 米 万 玉生 于 加 二 癌 工 玉环 全 来 来 来 束 尖 玉 束 米吉 水 华 来 迷 束 事 洒 米 玉 炒米 溃 素 水 求 玉 水 大 


var Folder = function( name ){ 
this.name = name; 
this.files = []; 

}; 


Folder.prototype.add = function( file ){ 
this.files.push( file ); 
}; 


Folder.prototype.scan = function(){ 
console.1og( “开始 扫描 文件 夹 : ' + this.name ); 
for ( var i = 0, file, files = this.files; file = files[ i++ ]; ){ 
file.scan(); 
} 
}; 


hahha ahd thiatsi ttt ali = eh hi hist tidbit tid hii 


var File = function( name ){ 
this.name = name; 


}; 


File.prototype.add = function(){ 
throw new ETTOT( “文件 下 面 不 能 再 添加 文件 ”)j 
}; 
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File.prototype.scan = function(){ 
console.1log(“' 开 始 扫描 文件 : ' + this.name ); 
}; 
接 下 来 创建 一 些 文件 夹 和 文件 对 象 ， 并 且 让 它们 组 合成 一 棵 树 ， 这 棵 树 就 是 我 们 F 盘 里 的 
现 有 文件 目录 结构 : 


var folder = new Folder(' 学 习 资 料 ' ); 
var folder1 = new Folder( 'JavaScript' ); 
var folder2 = new Folder ( 'jQuery' ); 


var file1 = new File( 'JavaScript 设计 模式 与 开发 实践 ' ); 
var file2 = new File(' 精 通 jQuery' ); 
var file3 = new File( ' 重 构 与 模式 ' ) 


folder1.add( file1 ); 
folder2.add( file2 ); 


folder.add( folder1 ); 
folder.add( folder2 ); 
folder.add( file3 ); 


现在 的 需求 是 把 移动 硬盘 里 的 文件 和 文件 夹 都 复制 到 这 棵 树 中 , 假设 我 们 已 经 得 到 了 这 些 文 
件 对 象 : 
var folder3 = new Folder( 'Nodejs' ); 


var file4 = new File(“ 深 入 浅 出 Node.js'" ); 
folder3.add( file4 ); 


var file5 = new File( 'JavaScript 语言 精 休 与 编程 实践 ' ); 
接 下 来 就 是 把 这 些 文件 都 添加 到 原 有 的 树 中 : 


folder.add( folder3 ); 
folder.add( files ); 


通过 这 个 例子 , 我 们 再 次 看 到 客户 是 如 何 同等 对 待 组 合 对 象 和 叶 对 象 。 在 添加 一 批文 件 的 操 
作 过 程 中 , 客户 不 用 分 辨 它们 到 底 是 文件 还 是 文件 夹 。 新 增加 的 文件 和 文件 夹 能 够 很 容易 地 添加 
到 原来 的 树 结构 中 ， 和 树 里 已 有 的 对 象 一 起 工作 。 

我 们 改变 了 树 的 结构 ， 增 加 了 新 的 数据 ， 却 不 用 修改 任何 一 句 原 有 的 代码 ， 这 是 符合 开放 - 
封闭 原则 的 。 

运用 了 组 合 模式 之 后 , 扫描 整个 文件 夹 的 操作 也 是 轻而易举 的 , 我 们 只 需要 操作 树 的 最 顶端 


folder.scan(); 


执行 结果 如 图 10-4 所 示 。 
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Q 日 Elements Network Sources Timeline Profiles Resources Audits |Gonsole| 
~ 


开始 扫描 文 件 来 : 
开始 扫描 文件 来 : J 
开始 扫描 文件 : 


pt 


ip 设计 模式 与 开发 实践 


开始 扫描 交 ) 
开始 扫描 文件 : 重 构 与 模式 
开始 扫描 交 件 夹 : Nodejs 
开始 扫描 文件 : 深入 浅 出 Node .js 
开始 扫描 文件 : Javsscript 语 言 精 储 与 编程 实践 


图 10-4 


10.8 ”一些 值得 注意 的 地 方 

在 使 用 组 合 模式 的 时 候 ， 还 有 以 下 几 个 值得 我 们 注意 的 地 方 。 

1. 组 合 模式 不 是 父子 关系 
组 合 模式 的 树 型 结构 容易 让 人 误 以 为 组 合 对 象 和 叶 对 象 是 父子 关系 ， 这 是 不 正确 的 。 
组 合 模式 是 一 种 HAS-A (聚合 ) 的 关系 ， 而 不 是 IS-A。 组 合 对 象 包含 一 组 时 对 象 ， 但 Leaf 
并 不 是 Composite 的 子 类 。 组 合 对 象 把 请 求 委托 给 它 所 包含 的 所 有 叶 对 象 ， 它 们 能 够 合作 的 关键 
是 拥有 相同 的 接口 。 

为 了 方便 描述 ， 本 章 有 了 时候 把 上 下 级 对 象 称 为 父子 节点 , 但 大 家 要 知道 ,它们 并 非 真正 意义 
上 的 父子 关系 。 

2. 对 叶 对 象 操作 的 一 致 性 

组 合 模式 除了 要 求 组 合 对 象 和 叶 对 象 拥 有 相同 的 接口 之 外 , 还 有 一 个 必要 条 件 , 就 是 对 一 组 
叶 对 象 的 操作 必须 具有 一 致 性 。 

比如 公司 要 给 全 体 员工 发 放 元 旦 的 过 节 费 1000 块 ， 这 个 场景 可 以 运用 组 合 模式 ， 但 如 果 公 
司 给 今天 过 生日 的 员工 发 送 一 封 生 日 祝福 的 邮件 , 组 合 模式 在 这 里 就 没有 用 武之 地 了 ，, 除非 先 把 
今天 过 生日 的 员工 挑选 出 来 。 只 有 用 一 致 的 方式 对 待 列 表 中 的 每 个 叶 对 象 的 时 候 , 才 适 合 使 用 组 
合 模式 。 

3. 双向 映射 关系 

发 放 过 节 费 的 通知 步骤 是 从 公司 到 各 个 部 门 ,再 到 各 个 小 组 ,最 后 到 每 个 员工 的 邮箱 里 。 这 
本 身 是 一 个 组 合 模式 的 好 例子 , 但 要 考虑 的 一 种 情况 是 ,也 许 某 些 员工 属于 多 个 组 织 架 构 。 比 如 
某 位 架构 师 既 隶属 于 开发 组 ， 又 隶属 于 架构 组 ， 对 象 之 间 的 关系 并 不 是 严格 意义 上 的 层次 结构 ， 
在 这 种 情况 下 ， 是 不 适合 使 用 组 合 模式 的 ， 该 架构 师 很 可 能 会 收 到 两 份 过 节 费 。 
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这 种 复合 情况 下 我 们 必须 给 父 节 点 和 子 节点 建立 双向 映射 关系 ,一 个 简单 的 方法 是 给 小 组 和 员 
工 对 象 都 增加 集合 来 保存 对 方 的 引用 。 但 是 这 种 相互 间 的 引用 相当 复杂 , 而 且 对 象 之 间 产 生 了 过 多 
的 耦合 性 ， 修 改 或 者 删除 一 个 对 象 都 变 得 困难 ， 此 时 我 们 可 以 引入 中 介 者 模式 来 管理 这 些 对 象 。 

4. 用 职责 链 模式 提高 组 合 模式 性 能 

在 组 合 模式 中 ,如 果树 的 结构 比较 复杂 ， 节 点 数量 很 多 , 在 遍历 树 的 过 程 中 , 性 能 方面 也 许 
表现 得 不 够 理想 。 有 了 时候 我 们 确实 可 以 借助 一 些 技巧 ， 在 实际 操作 中 避免 遍历 整 棵 树 ， 有 一 种 现 
成 的 方案 是 借助 职责 链 模 式 。 职 责 链 模式 一 般 需要 我 们 手动 去 设置 链条 , 但 在 组 合 模式 中 , 父 对 
象 和 子 对 象 之 间 实 际 上 形成 了 天 然 的 职责 链 。 让 请 求 顺 着 链条 从 父 对 象 往 子 对 象 传递 , 或 者 是 反 
过 来 从 子 对 象 往 父 对 象 传递 , 直到 遇 到 可 以 处 理 该 请 求 的 对 象 为 止 , 这 也 是 职责 链 模式 的 经 典 运 
用 场景 之 一 。 


10.9 引用 父 对 象 


在 11.7 节 提 到 的 例子 中 , 组 合 对 象 保 存 了 它 下 面 的 子 节点 的 引用 , 这 是 组 合 模式 的 特点 , 此 
时 树 结 构 是 从 上 至 下 的 。 但 有 时 候 我 们 需要 在 子 节点 上 保持 对 父 节点 的 引用 ， 比 如 在 组 合 模式 中 
使 用 职责 链 时 , 有 可 能 需要 让 请 求 从 子 节 点 往 父 节点 上 冒 泡 传递 。 还 有 当 我 们 删除 某 个 文件 的 时 
候 ， 实 际 上 是 从 这 个 文件 所 在 的 上 层 文 件 夹 中 删除 该 文件 的 。 
现在 来 改写 扫描 文件 夹 的 代码 , 使 得 在 扫描 整个 文件 夹 之 前 , 我 们 可 以 先 移 除 某 一 个 具体 的 
文件 。 
首先 改写 Folder 类 和 File 类 , 在 这 两 个 类 的 构造 函数 中 , 增加 this.parent 属性 ， 并 且 在 调 
用 add 方 法 的 时 候 ， 正 确 设 置 文件 或 者 文件 夹 的 父 节 点 : 
var Folder = function( name ){ 
this.name = name; 
this.parent = null; // 增 加 this.parent 属性 


this.files = []; 
}; 


Folder.prototype.add = function( file ){ 
file.parent = this; // 设 置 父 对 象 
this.files.push( file ); 

}; 


Folder.prototype.scan = function(){ 
console.1og(“ 开 始 扫描 文件 夹 : ' + this.name ); 
for ( var i = 0, file, files = this.files; file = files[ i++ ]; ){ 
file.scan(); 
} 
}; 


接 下 来 增加 Folder.prototype.remove 方法 ， 表 示 移 除 该 文件 夹 : 
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Folder.prototype.remove = function(){ 
if ( !this.parent ){  ”// 根 节点 或 者 树 外 的 游离 节点 
return; 
} 


for ( var files = this.parent.files, 1 = files.length - 1; 1 >=0; 1-- ){ 
var file = files[ 1 ]; 
if ( file === this ){ 
files.splice( 1, 1 ); 
} 


} 

}; 

在 File.prototype.remove 方法 里 ， 首 先 会 判断 this.parent， 如 果 this.parent 为 null1， 那 么 
这 个 文件 夹 要 么 是 树 的 根 节点 ,要 么 是 还 没有 添加 到 树 的 游离 节点 ,， 这 时候 没 有 节点 需要 从 树 中 
移 除 ， 我 们 暂且 让 remove 方 法 直接 return， 表 示 不 做 任何 操作 。 

如 果 this.parent 不 为 nu11， 则 说 明 该 文件 夹 有 父 节 点 存在 ， 此 时 遍历 父 节 点 中 保存 的 子 节 
点 列表 ， 删 除 想 要 删除 的 子 节 点 。 

File 类 的 实现 基本 一 致 : 

var File = function( name ){ 


this.name = name; 
this.parent = null; 


File.prototype.add = function(){ 
throw new Error(' 不 能 添加 在 文件 下 面 ' ); 
}; 


File.prototype.scan = function(){ 
console.1log(' 开 始 扫 描 文件 : ' + this.name ); 


二 


File.prototype.remove = function(){ 
if ( !this.parent ){  ”// 根 节点 或 者 树 外 的 游离 节点 
return; 
} 


for ( var files = this.parent.files, 1 = files.length - 1; 1 >=0; 1-- ){ 
var file = files[ 1 ]; 
if ( file === this ){ 
files.splice( 1, 1 ); 
} 


} 
}; 
下 面 测试 一 下 我 们 的 移 除 文件 功能 : 


var folder = new Folder( “学 习 资 料 ' ); 
var folder1 = new Folder( 'Javascript' ); 
var file1 = new Folder (“ 深 入 浅 出 Node.js' ); 
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folder1.add( new File( 'JavaScript 设计 模式 与 开发 实践 ) ); 
folder.add( folder1 ); 
folder.add( file1 ); 


folder1.remove(); // 移 除 文件 夹 
folder.scan(); 


执行 结果 如 图 10-5 所 示 。 


Q 日 Eements Network Sources Timeline Profiles Resources Audits |Gonsole 
© 守 topframe> 

开始 扫 掏 文 件 夹 : 学 习 资料 

开始 扫 指 文件 夹 ; 深入 浅 出 Node .js 


图 10-5 


10.10” 何 时 使 用 组 合 模式 


组 合 模式 如 果 运 用 得 当 , 可 以 大 大 简化 客户 的 代码 。 一 般 来 说 , 组 合 模 式 适用 于 以 下 这 两 种 
情况 。 

口 表示 对 象 的 部 分 -整体 层次 结构 。 组 合 模式 可 以 方便 地 构造 一 棵 树 来 表示 对 象 的 部 分 - 整 
体 结构 。 特 别 是 我 们 在 开发 期 间 不 确定 这 棵 树 到 底 存 在 多 少 层次 的 时 候 。 在 树 的 构造 最 
终 完成 之 后 ， 只 需要 通过 请 求 树 的 最 顶层 对 象 ， 便 能 对 整 棵 树 做 统一 的 操作 。 在 组 合 模 
式 中 增加 和 删除 树 的 节点 非常 方便 ， 并 且 符合 开放 -封闭 原则 。 

口 客户 希望 统一 对 待 树 中 的 所 有 对 象 。 组 合 模式 使 客户 可 以 忽略 组 合 对 象 和 叶 对 象 的 区 别 ， 
客户 在 面 对 这 棵 树 的 时 候 ， 不 用 关心 当前 正在 处 理 的 对 象 是 组 合 对 象 还 是 叶 对 象 ， 也 就 
不 用 写 一 堆 if、else 语句 来 分 别处 理 它 们 。 组 合 对 象 和 叶 对 象 会 各 自 做 自己 正确 的 事情 ， 
这 是 组 合 模式 最 重要 的 能 力 。 


i 


10.11 小结 


本 章 我 们 了 解 了 组 合 模式 在 JavaScript 开发 中 的 应 用 。 组 合 模式 可 以 让 我 们 使 用 树 形 方式 创 
建 对 象 的 结构 。 我 们 可 以 把 相同 的 操作 应 用 在 组 合 对 象 和 单个 对 象 上 。 在 大 多 数 情况 下 , 我 们 都 
可 以 忽略 掉 组 合 对 象 和 单个 对 象 之 间 的 差别 ， 从 而 用 一 致 的 方式 来 处 理 它们 。 

然而 , 组 合 模式 并 不 是 完美 的 , 它 可 能 会 产生 一 个 这 样 的 系统 : 系统 中 的 每 个 对 象 看 起 来 都 
与 其 他 对 象 差不多 。 它们 的 区 别 只 有 在 运行 的 时 候 会 才 会 显现 出 来 , 这 会 使 代码 难以 理解 。 此 外 ， 
如 果 通 过 组 合 模式 创建 了 太 多 的 对 象 ， 那 么 这 些 对 象 可 能 会 让 系统 负担 不 起 。 
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在 JavaScript 开发 中 用 到 继承 的 场景 其 实 并 不 是 很 多 ,很 多 时 候 我 们 都 喜欢 用 mix-in 的 方式 
给 对 象 扩展 属性 。 但 这 不 代表 继承 在 JavaScript 里 没有 用 武之 地 , 虽然 没有 真正 的 类 和 继承 机 制 ， 
但 我 们 可 以 通过 原型 prototype 来 变相 地 实现 继承 。 

不 过 本 章 并 非 要 讨论 继承 ， 而 是 讨论 一 种 基于 继承 的 设计 模式 一 一 模板 方法 ( Template Method ) 
模式 。 
11.1 模板 方法 模式 的 定义 和 组 成 

模板 方法 模式 是 一 种 只 需 使 用 继承 就 可 以 实现 的 非常 简单 的 模式 。 

模板 方法 模式 由 两 部 分 结构 组 成 , 第 一 部 分 是 抽象 父 类 , 第 二 部 分 是 具体 的 实现 子 类 。 通常 
在 抽象 父 类 中 封装 了 子 类 的 算法 框架 , 包括 实现 一 些 公共 方法 以 及 封装 子 类 中 所 有 方法 的 执行 顺 
序 。 子 类 通过 继承 这 个 抽象 类 ， 也 继承 了 整个 算法 结构 ， 并 且 可 以 选择 重 写 父 类 的 方法 。 

假如 我 们 有 一 些 平行 的 子 类 ,各 个 子 类 之 间 有 一 些 相 同 的 行为 , 也 有 一 些 不 同 的 行为 。 如 果 
相同 和 不 同 的 行为 都 混合 在 各 个 子 类 的 实现 中 ,说 明 这 些 相同 的 行为 会 在 各 个 子 类 中 重复 出 现 。 
但 实际 上 , 相同 的 行为 可 以 被 搬移 到 另外 一 个 单一 的 地 方 , 模板 方法 模式 就 是 为 解决 这 个 问题 而 
生 的 。 在 模板 方法 模式 中 , 子 类 实现 中 的 相同 部 分 被 上 移 到 父 类 中 ， 而 将 不 同 的 部 分 留待 子 类 来 
实现 。 这 也 很 好 地 体现 了 泛 化 的 思想 。 


11.2 ”第 一 个 例子 一 一 Coffee or Tea 


咖啡 与 茶 是 一 个 经 典 的 例子 , 经 常用 来 讲解 模板 方法 模式 , 这 个 例子 的 原型 来 自 《 Head First 
设计 模式 六 这 一 节 我 们 就 用 JavaScript 来 实现 这 个 例子 。 
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11.2.1 先 泡 一 杯 咖啡 


首先 ， 我 们 先 来 泡 一 杯 咖啡 ， 如 果 没 有 什么 太 个 性 化 的 需求 ， 泡 咖啡 的 步骤 通常 如 下 : 
(1) 把 水 煮沸 

(2) 用 沸水 冲 泡 咖啡 

(G3) 把 咖啡 倒 进 杯子 

(4) 加 糖 和 牛奶 

通过 下 面 这 段 代码 ， 我 们 就 能 得 到 一 杯 香 浓 的 咖啡 : 


var Coffee = function(){}; 


Coffee.prototype.boilWater = function(){ 
console.1og( “把 水 孝 漳 ” ); 
】 


Coffee.prototype.brewCoffeeGriends = function(){ 
console.1og(“ 用 沸水 冲 泡 咖 啡 ' ); 
}; 


Coffee.prototype.pourInCup = function(){ 
console.1og( “把 咖啡 倒 进 杯子 ” ) ; 
}; 


Coffee.prototype.addSugarAndMilk = function(){ 
console.log(“' 加 糖 和 牛奶， ); 
}; 


Coffee.prototype.init = function(){ 
this.boilWater(); 
this.brewCoffeeGriends(); 
this.pourInCup(); 
this.addSugarAndMilk(); 

}; 


var coffee = new Coffee(); 
coffee.init(); 


11.2.2” 泡 一 壶 茶 
接 下 来 ， 开 始 准备 我 们 的 茶 ， 泡 茶 的 步骤 跟 泡 咖 啡 的 步 又 相差 并 不 大 : 
(1) 把 水 者 沸 
(2) 用 沸水 浸泡 茶叶 
(3) 把 茶水 倒 进 杯子 
(4) 加 柠檬 
同样 用 一 段 代码 来 实现 泡 茶 的 步骤 : 
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Var 


Tea = function(){}; 


prototype.boilWater = function(){ 


Tea. 
console.1og( “把 水 孝 沸 ” ); 
}; 
Tea.prototype.steepTeaBag = function(){ 


console.log( ' 用 沸水 浸泡 茶叶 ' ); 


.prototype.pourInCup = function(){ 


console.log(' 把 茶水 倒 进 杯子 ' ); 


.prototype.addLemon = function(){ 


console.1log(“' 加 柠 榜 ' ); 


.prototype.init = function(){ 


this.boilWater(); 
this. steepTeaBag(); 
this.pourInCup(); 
this.addLemon(); 


}; 
var tea = new Tea(); 
tea.init(); 

11.2.3 ”分 离 出 共同 点 


现在 我 们 分 别 泡 好 了 一 杯 咖 啡 和 一 壶 茶 , 经 过 思考 和 比较 , 我 们 发 现 咖 啡 和 茶 的 冲 泡 过 和 


大 同 小 异 的 ， 如 表 11-1 所 示 。 


表 11-1 咖啡 和 茶 的 冲 泡 过 程 


HI 


并 


泡 咖 啡 泡 茶 
把 水 煮沸 把 水 考 沸 
用 沸水 冲 泡 咖啡 用 沸水 浸泡 茶叶 
把 咖啡 倒 进 杯子 把 茶水 倒 进 杯子 
加 糖 和 牛奶 加 柠檬 


我 们 找到 泡 咖 啡 和 泡 条 主要 有 以 下 不 同 点 。 


D 原料 不 同 。 一 个 是 咖啡 ,一 个 是 茶 , 但 我 们 可 以 把 它们 都 抽象 为 “饮料 ”。 


口 加 入 的 调料 不 同 。 


个 是 糖 和 4 


F 奶 ， 


口 泡 的 方式 不 同 。 咖 啡 是 冲 泡 ， 而 茶叶 是 浸泡 ， 我 们 可 以 把 它们 都 抽象 为 “ 泡 ”。 


个 是 柠檬 ， 但 我 们 可 以 把 它们 都 抽象 为 “调料 ”。 


经 过 抽象 之 后 ， 不 管 是 泡 咖 啡 还 是 泡 茶 ， 我 们 都 能 整理 为 下 面 四 步 : 
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(1) 把 水 煮沸 

(2) 用 沸水 冲 泡 饮料 

G3) 把 饮料 倒 进 杯子 

(4) 加 调料 

所 以 , 不 管 是 冲 泡 还 是 浸泡 ， 我们 都 能 给 它 一 个 新 的 方法 名 称 ， 比 如 说 brew()。 同 理 ,， 不 管 
是 加 糖 和 牛奶 ， 还 是 加 柠 模 ， 我 们 都 可 以 称 之 为 addCondiments()。 

让 我 们 忘记 最 开始 创建 的 Coffee 类 和 Tea 类 。 现在 可 以 创建 一 个 抽象 父 类 来 表示 泡 一 杯 饮 
0 ob a 


var Beverage = function(){}; 


Beverage.prototype.boilWater = function(){ 
console.1og(“ 把 水 孝 漳 ” ); 
}; 


Beverage.prototype.brew = function(){}; // 空 方 法 ， 应 该 由 子 类 重 写 
Beverage.prototype.pourInCup = function(){}; // 空 方法 ， 应 该 由 子 类 重 写 
Beverage.prototype.addCondiments = function(){}; // 空 方法 ， 应 该 由 子 类 重 写 
Beverage.prototype.init = function(){ 

this.boilWater(); 

this.brew(); 


this.pourInCup(); 
this.addCondiments(); 


11.2.4 创建 Coffee 子 类 和 Tea 子 类 

现在 创建 一 个 Beverage 类 的 对 象 对 我 们 来 说 没有 意义 , 因为 世界 上 能 喝 的 东西 没有 一 种 真正 
叫 “ 饮 料 ” 的 ,饮料 在 这 里 还 只 是 一 个 抽象 的 存在 。 接 下 来 我 们 要 创建 咖啡 类 和 茶 类 ， 并 让 它们 
继承 饮料 类 : 


var Coffee = function(){}; 


Coffee.prototype = new Beverage(); 
接 下 来 要 重 写 抽象 父 类 中 的 一 些 方法 , 只 有 "把 水 煮沸 ”这 个 行为 可 以 直接 使 用 父 类 Beverage 
中 的 boilWater 方法 ， 其 他 方法 都 需要 在 Coffee 子 类 中 重 写 ， 代 码 如 下 : 


Coffee.prototype.brew = function(){ 
console.log( ' 用 沸水 冲 泡 咖 啡 '); 


js 


Coffee.prototype.pourInCup = function(){ 
console.1og( “把 咖啡 倒 进 杯子 ”) ; 
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}; 


Coffee.prototype.addCondiments = function(){ 
console.log(“' 加 糖 和 牛奶 ，); 
var Coffee = new Coffee(); 
Coffee.init(); 
至 此 我 们 的 Coffee 类 已 经 完成 了 ， 当 调用 coffee 对 象 的 init 方法 时 ， 由 于 coffee 对 象 和 
Coffee 构造 右 的 原型 prototype 上 都 没有 对 应 的 init 方法 ， 所 以 该 请 求 会 顺 着 原型 链 ， 被 委托 给 
Coffee 的 “ 父 类 ”Beverage 原型 上 的 init 方法 。 


而 Beverage.prototype.init 方法 中 已 经 规定 好 了 泡 饮料 的 顺序 ， 所 以 我 们 能 成 功 地 泡 出 一 杯 
咖啡 ， 代 码 如 下 : 


Beverage.prototype.init = function(){ 
this.boilWater(); 
this.brew(); 
this.pourInCup(); 
this.addCondiments(); 


}; 

接 下 来 照 戎 上 芦 画 靳 ， 来 创建 我 们 的 Tea 类 : 
var Tea = function(){}; 

Tea.prototype = new Beverage(); 
Tea.prototype.brew = function(){ 


console.log( ' 用 沸水 浸泡 茶叶 ' ); 


Tea.prototype.pourInCup = function(){ 
console.log(' 把 茶 倒 进 杯子 ' ); 


Tea.prototype.addCondiments = function(){ 
console.1log(“' 加 柠 榜 ' ); 


}; 


var tea = new Tea(); 
tea.init(); 


本 章 一 直 讨 论 的 是 模板 方法 模式 , 那么 在 上 面 的 例子 中 , 到 底 谁 才 是 所 谓 的 模板 方法 呢 ? 答 
案 是 Beverage.prototype.init。 

Beverage.prototype.init 被 称 为 模板 方法 的 原因 是 ， 该 方法 中 封装 了 子 类 的 算法 框架 ， 它 作 
为 一 个 算法 的 模板 ， 指 导 子 类 以 何 种 顺序 去 执行 哪些 方法 。 在 Beverage.prototype.init 方法 中 ， 
算法 内 的 每 一 个 步 又 都 清楚 地 展示 在 我 们 眼前 。 
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11.3 ”抽象 类 


首先 要 说 明 的 是 ， 模 板 方法 模式 是 一 种 严重 依赖 抽象 类 的 设计 模式 。JavaScript 在 语言 层面 
并 没有 提供 对 抽象 类 的 支持 ， 我 们 也 很 难 模拟 抽象 类 的 实现 。 这 一 节 我 们 将 着 重 讨论 Java 中 抽 
象 类 的 作用 ， 以 及 JavaScript 没有 抽象 类 时 所 做 出 的 让 步 和 变通 。 


11.3.1 抽象 类 的 作用 


在 Java 中 ， 类 分 为 两 种 ， 一 种 为 具体 类 ， 另 一 种 为 抽象 类 。 具 体 类 可 以 被 实例 化 ， 抽 象 类 
不 能 被 实例 化 。 要 了 解 抽象 类 不 能 被 实例 化 的 原因 ， 我 们 可 以 思考 “饮料 ”这 个 抽象 类 。 

想象 这 样 一 个 场景 : 我 们 口 渴 了 ， 去 便利 店 想 买 一 瓶 饮 料 ， 我 们 不 能 直接 跟 店 员 说 :“ 来 一 
瓶 饮 料 。” 如 果 我 们 这 样 说 了 , 那么 店员 接 下 来 肯定 会 问 :“ 要 什么 饮料 ”” 饮 料 只 是 一 个 抽象 名 
词 ， 只 有 当 我 们 真正 明确 了 的 饮料 类 型 之 后 ， 才 能 得 到 一 杯 咖 啡 、 茶 、 或 者 可 乐 。 

由 于 抽象 类 不 能 被 实例 化 , 如 果 有 人 编写 了 一 个 抽象 类 , 那么 这 个 抽象 类 一 定 是 用 来 被 某 些 
有 具体 类 继承 的 。 
抽象 类 和 接口 一 样 可 以 用 于 向 上 转型 ( 可 参考 1.3 节 关于 多 态 的 内 容 )， 在 静态 类 型 语言 中 ， 
编译 器 对 类 型 的 检查 总 是 一 个 绕 不 过 的 话题 与 困扰 。 虽 然 类 型 检查 可 以 提高 程序 的 安全 性 , 但 繁 
琐 而 严格 的 类 型 检查 也 时 常会 让 程序 员 觉得 麻烦 。 把 对 象 的 真正 类 型 隐藏 在 抽象 类 或 者 接口 之 
后 ， 这 些 对 象 才 可 以 被 互相 坎 换 使 用 。 这 可 以 让 我 们 的 Java 程序 尽量 遵守 依赖 倒置 原则 。 

除了 用 于 向 上 转型 , 抽象 类 也 可 以 表示 一 种 契约 。 继 承 了 这 个 抽象 类 的 所 有 子 类 都 将 拥有 跟 
抽象 类 一 致 的 接口 方法 , 抽象 类 的 主要 作用 就 是 为 它 的 子 类 定义 这 些 公共 接口 。 如 果 我 们 在 子 类 
中 删 掉 了 这 些 方法 中 的 某 一 个 ， 那 么 将 不 能 通过 编译 器 的 检查 ， 这 在 某 些 场景 下 是 非常 有 用 的 ， 
比如 我 们 本 章 讨 论 的 模板 方法 模式 ，Beverage 类 的 init 方法 里 规定 了 冲 泡 一 杯 饮料 的 顺序 如 下 : 

this.boilWater(); ”// 把 水 党 沸 

this.brew(); // 用 水 泡 原料 

this.pourInCup(); // 把 原料 倒 进 杯子 

this.addCondiments(); // 添加 调料 

如 果 在 Coffee 子 类 中 没有 实现 对 应 的 brew 方法 ， 那 么 我 们 百分之百 得 不 到 一 杯 咖啡 。 既 然 
父 类 规定 了 子 类 的 方法 和 执行 这 些 方 法 的 顺序 , 子 类 就 应 该 拥有 这 些 方法 ,并 且 提 供 正 确 的 实现 。 


11.3.2 ”抽象 方法 和 具体 方法 


抽象 方法 被 声明 在 抽象 类 中 ， 抽 象 方法 并 没有 有 具体 的 实现 过 程 ， 是 一 些 “ 哑 ”方法 。 比 如 
Beverage 类 中 的 brew 方 法 、pourInCup 方法 和 addCondiments 方法 ， 都 被 声明 为 抽象 方法 。 当 子 类 
继承 了 这 个 抽象 类 时 ， 必 须 重 写 父 类 的 抽象 方法 。 

除了 抽象 方法 之 外 , 如果 每 个 子 类 中 都 有 一 些 同样 的 具体 实现 方法 , 那 这 些 方法 也 可 以 选择 
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放 在 抽象 类 中 , 这 可 以 节省 代码 以 达到 复 用 的 效果 , 这 些 方法 叫 作 具体 方法 。 当 代码 需要 改变 时 ， 
我 们 只 需要 改动 抽象 类 里 的 具体 方法 就 可 以 了 。 比 如 饮料 中 的 boilWater 方法 ， 假 设 冲 泡 所 有 的 
饮料 之 前 ， 都 要 先 把 水 者 沸 ， 那 我 们 自然 可 以 把 boilWater 方法 放 在 抽象 类 Beverage 中 。 


11.3.3 用 Java 实现 Coffee or Tea 的 例子 
下 面 我 们 尝试 着 把 Coffee 和 Tea 的 例子 换 成 Java 代码 ， 这 有 助 于 我 们 理解 抽象 类 的 意义 。 


// Java 代码 


public abstract class Beverage { // 饮料 抽象 类 
final void init(){ // 模板 方法 


boilWater(); 
brew(); 
pourInCup(); 
addCondiments(); 
} 
void boilWater(){ // 具体 方法 boilWater 
System.out .println(“" 把 水 者 沸 ”); 
} 
abstract void brew(); // 抽象 方法 brew 
abstract void addCondiments(); // 抽象 方法 addCondiments 
abstract void pourInCup(); // 抽象 方法 pourInCup 
} 
public class Coffee extends Beverage{ // Coffee 类 
@Override 


void brew() {  ”// 子 类 中 重 写 brew 方 法 
System.out .println( “用 沸水 冲 泡 咖 啡 ” ); 


Q@Override 
void pourInCup(){ // 子 类 中 重 写 pourInCup 方法 
System.out .println( “把 咖啡 倒 进 杯子 ”)j 


} 
@Override 
void addCondiments() { // 子 类 中 重 写 addCondiments 方法 
System.out .println( “加糖 和 牛奶 ”); 
} 
} 
public class Tea extends Beveraget{ // Tea 类 
@Override 
void brew() { // 子 类 中 重 写 brew 方法 
System.out.pTintln( “用 沸水 浸泡 茶叶 "” ) ; 
中 
@Override 
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void pourInCup(){ // 子 类 中 重 写 pourInCup 方法 
System.out.println(“" 把 茶 倒 进 杯子 ”); 
} 


QOverride 

void addCondiments() { // 子 类 中 重 写 addCondiments 方法 
System.out .println( “加 柠檬 " ); 

} 


} 
public class Test { 


private static void prepareRecipe( Beverage beverage ){ 
beverage.init(); 
} 


public static void main( String args[] ){ 
Beverage coffee = new Coffee();  // 创建 coffee 对 象 
prepareRecipe( coffee ); // 开始 泡 咖 啡 
// 把 水 者 沸 
// 用 沸水 冲 泡 咖 啡 
// 把 咖啡 倒 进 杯子 
// 加 糖 和 牛奶 


Beverage tea = new Tea();  // 创建 tea 对象 
prepareRecipe( tea ); // 开始 泡 茶 
// 把 水 阁 沸 
// 用 沸水 浸泡 茶叶 
// 把 茶 倒 进 杯子 
// 加 柠檬 
} 
=’ 


11.3.4 ”JavaScript 没有 抽象 类 的 缺点 和 解决 方案 


JavaScript 并 没有 从 语法 层面 提供 对 抽象 类 的 文 持 。 抽 象 类 的 第 一 个 作用 是 隐藏 对 象 的 具 


体 类 型 ， 由 于 JavaScript 是 一 门 “ 类 型 模糊 ”的 语言 ， 所 以 隐藏 对 象 的 类 型 在 JavaScript 中 并 


不 重要 。 


另 一 方面 ， 当 我 们 在 JavaScript 中 使 用 原型 继承 来 模拟 传统 的 类 式 继承 时 ,并 没有 编 


助 我 们 进行 任何 形式 的 检查 ， 我 们 也 没有 办 法 保证 子 类 会 重 写 父 类 中 的 “抽象 方法 ”。 


译 器 玫 


我 们 知道 ，Beverage.prototype.init 方法 作为 模板 方法 ， 已 经 规定 了 子 类 的 算法 框架 ， 代 码 


如 下 : 


Beverage.prototype.init = function(){ 
this.boilWater(); 
this.brew(); 
this.pourInCup(); 
this.addCondiments(); 

}; 
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如 果 我 们 的 Coffee 类 或 者 Tea 类 忘记 实现 这 4 个 方法 中 的 一 个 呢 ? 拿 brew 方法 举例 ， 如 果 


我 们 忘记 编写 Coffee.prototype.brew 方法 ,那么 当 请 求 coffee 对 象 的 brew 时 ， 请 求 会 顺 着 原型 
链 找到 Beverage“ 父 类 ”对 应 的 Beverage.prototype.brew 方法 ， 而 Beverage.prototype.brew 方法 
到 目前 为 止 是 一 个 空 方法 ， 这 显然 是 不 能 符合 我 们 需要 的 。 


在 Java 中 编译 器 会 保证 子 类 会 重 写 父 类 中 的 抽象 方法 , 但 在 JavaScript 中 却 没有 进行 这 些 检 
查 工作 。 我 们 在 编写 代码 的 时 候 得 不 到 任何 形式 的 警告 , 完全 寄托 于 程序 员 的 记忆 力 和 自觉 性 是 


很 危险 的 ， 特 别 是 当 我 们 使 用 模板 方法 模式 这 种 完全 依赖 继承 而 实现 的 设计 模式 时 。 


下 面 提供 两 种 变通 的 解决 方案 。 


第 1 种 方案 是 用 鸭子 类 型 来 模拟 接口 检查 ， 以 便 确 保 子 类 中 确实 重 写 了 父 类 的 方法 。 但 模 
拟 接 口 检查 会 带 来 不 必要 的 复杂 性 ， 而 且 要 求 程序 员 主 动 进行 这 些 接 口 检 查 ， 这 就 要 求 
我 们 在 业务 代码 中 添加 一 些 跟 业务 逻辑 无 关 的 代码 。 

第 2 种 方案 是 让 Beverage.prototype.brew 等 方法 直接 抛 出 一 个 异常 ,如果 因 为 粗心 忘记 编 
写 Coffee.prototype.brew 方 法 ， 那 么 至 少 我 们 会 在 程序 运行 时 得 到 一 个 错误 : 
Beverage.prototype.brew = function(){ 


throw new Error( ' 子 类 必须 重 写 brew 方法" ); 
}; 


Beverage.prototype.pourInCup = function(){ 
throw new Error( ' 子 类 必须 重 写 pourInCup 方法 ” ); 
}; 


Beverage.prototype.addCondiments = function(){ 
throw new Error( ' 子 类 必须 重 写 addCondiments 方法 ” ); 
}; 


第 2 种 解决 方案 的 优点 是 实现 简单 ,付出 的 额外 代价 很 少 ; 缺点 是 我 们 得 到 错误 信息 的 时 间 


点 太 靠 后 。 


我 们 一 共有 3 次 机 会 得 到 这 个 错误 信息 , 第 1 次 是 在 编写 代码 的 时 候 , 通过 编译 器 的 检查 来 


得 到 错误 信息 ; 第 2 次 是 在 创建 对 象 的 时 候 用 鸭子 类 型 来 进行 “接口 检查 ”; 而 目前 我 们 不 得 不 


利 月 


最 后 一 次 机 会 ， 在 程序 运行 过 程 中 才 知 道 哪里 发 生 了 错误 。 


11.4 ”模板 方法 模式 的 使 用 场景 


从 大 的 方面 来 讲 , 模 板 方 法 模式 常 被 架构 师 用 于 搭建 项 目的 框架 ,架构 师 定 好 了 框架 的 骨架 ， 


程序 员 继 承 框架 的 结构 之 后 ， 负 责 往 里 面 填空 ， 比 如 Java 程序 员 大 多 使 用 过 HttpServlet 技术 来 
开发 项 目 。 


一 个 基于 HttpServlet 的 程序 包含 7 个 生命 周期 ， 这 7 个 生命 周期 分 别 对 应 一 个 do 方法 。 
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doGet() 

doHead() 

doPost() 

dopPut() 

doDelete() 

do0ption() 

doTrace() 

HttpServlet 类 还 提供 了 一 个 service 方法 ， 它 就 是 这 里 的 模板 方法 ，service 规定 了 这 些 do 
方法 的 执行 顺序 ， 而 这 些 do 方法 的 具体 实现 则 需要 Httpservlet 的 子 类 来 提供 。 

在 Web 开发 中 也 能 找到 很 多 模板 方法 模式 的 适用 场景 ， 比 如 我 们 在 构建 一 系列 的 UI 组 件 ， 
这 些 组 件 的 构建 过 程 一 般 如 下 所 示 ; 

(1) 初始 化 一 个 div 容器 ; 

(2) 通过 ajax 请 求 拉 取 相应 的 数据 ; 

(3) 把 数据 泻 染 到 div 容器 里 面 ， 完 成 组 件 的 构造 ; 

(4) 通知 用 户 组 件 泻 染 完 毕 。 

我 们 看 到 ， 任 何 组 件 的 构建 都 遵循 上 面 的 4 步 ， 其 中 第 (1) 步 和 第 (4) 步 是 相同 的 。 第 (2) 步 不 
同 的 地 方 只 是 请 求 ajax 的 远程 地 址 ， 第 (3) 步 不 同 的 地 方 是 泻 染 数据 的 方式 。 

于 是 我 们 可 以 把 这 4 个 步骤 都 抽象 到 父 类 的 模板 方法 里 面 , 父 类 中 还 可 以 顺便 提供 第 (1) 步 和 
第 (4) 步 的 具体 实现 。 当 子 类 继承 这 个 父 类 之 后 ， 会 重 写 模板 方法 里 面 的 第 (2) 步 和 第 (3) 步 。 


11.5 ” 钧 子 方 法 


通过 模板 方法 模式 , 我 们 在 父 类 中 封装 了 子 类 的 算法 框架 。 这 些 算法 框架 在 正常 状态 下 是 适 
用 于 大 多 数 子 类 的 , 但 如 果 有 一 些 特别 “个 性 ”的 子 类 呢 ? 比如 我 们 在 饮料 类 Beverage 中 封装 了 
饮料 的 冲 泡 顺 序 : 

(1) 把 水 煮沸 

(2) 用 沸水 冲 泡 饮 料 

(3) 把 饮料 倒 进 杯子 

(4) 加 调料 

这 4 个 冲 泡 饮料 的 步骤 适用 于 咖啡 和 茶 ,， 在 我 们 的 饮料 店 里 ,根据 这 4 个 步骤 制作 出 来 的 咖 
啡 和 茶 , 一 直 顺 利 地 提供 给 绝 大 部 分 客人 享用 。 但 有 一 些 客人 喝 咖啡 是 不 加 调料 ( 糖 和 牛奶 ) 的 。 
既然 Beverage 作为 父 类 , 已 经 规定 好 了 冲 泡 饮 料 的 4 个 步骤 , 那么 有 什么 办 法 可 以 让 子 类 不 受 这 
个 约束 呢 ? 

钩子 方法 〈hook ) 可 以 用 来 解决 这 个 问题 ， 放 置 钩子 是 隔离 变化 的 一 种 常见 手段 。 我 们 在 父 
类 中 容易 变化 的 地 方 放 置 钩子 ， 钧 子 可 以 有 一 个 默认 的 实现 ， 究 竟 要 不 要 “挂钩 "” ， 这 由 子 类 自 
行 决 定 。 钧 子 方法 的 返回 结果 决定 了 模板 方法 后 面部 分 的 执行 步 又 ， 也 就 是 程序 接 下 来 的 走向 ， 
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这 样 一 来 ， 程 序 就 拥有 了 变化 的 可 能 。 


在 这 个 例子 里 ,我 们 提 


I 
LY 


挂钩 的 名 字 定 为 customerWantsCondiments, 接 下 来 将 挂钩 放 入 Beverage 


看 看 我 们 如 何 得 到 一 杯 不 需要 糖 和 牛奶 的 咖啡 ， 代 码 如 下 : 


var Beverage = function(){}; 


Beverage.prototype.boilWater = function(){ 
console.1og( “把 水 孝 沸 ” ); 


}; 


Beverage.prototype.brew 
throw new Error(' 子 类 必须 重 写 brew 方法" ); 


} 


= function(){ 


Beverage.prototype.pourInCup = function(){ 
throw new Error( ' 子 类 必须 重 写 pourInCup 方法 ); 


忆 


Beverage.prototype.addCondiments = function(){ 
throw new Error(' 子 类 必须 重 写 addCondiments 方法 " ); 


bs 


Beverage.prototype.customerWantsCondiments = function(){ 
return true; // 默认 需要 调料 


3 


Beverage.prototype.init = function(){ 


this.boilWater(); 
this.brew(); 
this.pourInCup(); 


if ( this.customerWantsCondiments() ){ // 如 果 挂 钓 返回 true， 则 需要 调料 
this.addCondiments(); 


} 
}; 


var CoffeeWithHook = function(){}; 


CoffeeWithHook.prototype 


= new Beverage(); 


CoffeeWithHook.prototype.brew = function(){ 
console.1og(“ 用 沸水 冲 泡 咖 啡 ' ); 


二 


CoffeeWithHook.prototype.pourInCup = function(){ 
console.1og(“ 把 咖啡 倒 进 杯 子 "” ); 


}; 


CoffeeWithHook.prototype.addCondiments = function(){ 
console.log(“' 加 糖 和 牛奶， ); 


3 


CoffeeWithHook.prototype.customerWantsCondiments = function(){ 
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return window.confirm( ' 请 问 需要 调料 吗 ?'" ); 


3 


var coffeeWithHook = new CoffeeWithHook(); 
coffeeWithHook.init(); 


11.6 好莱坞 原则 


学 习 完 模板 方法 模式 之 后 ， 我 们 要 引入 一 个 新 的 设计 原则 一 著名 的 “好 莱 坞 原则 ”。 

好 莱 坞 无 疑 是 演员 的 天 堂 , 但 好 莱 坞 也 有 很 多 找 不 到 工作 的 新 人 演员 , 许多 新 人 演员 在 好 莱 
坞 把 简历 递 给 演艺 公司 之 后 就 只 有 回 家 等 待 电话 。 有 时 候 该 演员 等 得 不 耐烦 了 , 给 演艺 公司 打 电 
话 询问 情况 ， 演 艺 公司 往往 这 样 回答 :“ 不 要 来 找 我 ， 我 会 给 你 打 电 话 。” 

在 设计 中 , 这 样 的 规则 就 称 为 好 莱 坞 原则 。 在 这 一 原则 的 指导 下 ,我 们 允许 底层 组 件 将 自己 
挂钩 到 高 层 组 件 中 ,而 高 层 组 件 会 决定 什么 时 候 、 以 何 种 方式 去 使 用 这 些 底层 组 件 , 高 层 组 件 对 
待 底层 组 件 的 方式 ， 跟 演艺 公司 对 待 新 人 演员 一 样 ， 都 是 “ 别 调用 我 们 ， 我 们 会 调用 你 ”。 

模板 方法 模式 是 好 莱 坞 原则 的 一 个 典型 使 用 场景 , 它 与 好 莱 坞 原则 的 联系 非常 明显 ， 当 我 们 
用 模板 方法 模式 编写 一 个 程序 时 ,就 意味 着 子 类 放弃 了 对 自己 的 控制 权 , 而 是 改 为 父 类 通知 子 类 ， 
哪些 方法 应 该 在 什么 时 候 被 调用 。 作 为 子 类 ， 只 负责 提供 一 些 设计 上 的 细节 。 

除 此 之 外 ， 好 莱 坞 原则 还 常常 应 用 于 其 他 模式 和 场景 ， 例 如 发 布 -订阅 模式 和 回调 函数 。 

口 发 布 -订阅 模式 

在 发 布 -订阅 模式 中 , 发 布 者 会 把 消息 推送 给 订阅 者 , 这 取代 了 原先 不 断 去 feteh 消息 的 形式 。 
例如 假设 我 们 乘坐 出 租车 去 一 个 不 了 解 的 地 方 , 除 了 每 过 5 秒 钟 就 问 司机 “是 否 到 达 目 的 地 ”之 
外 ,还 可 以 在 车 上 美美 地 睡 上 一 党 ,然后 跟 司机 说 好 ,等 目的 地 到 了 就 叫 醒 你 。 这 也 相当 于 好 莱 
坞 原则 中 提 到 的 “ 别 调用 我 们 ， 我 们 会 调用 你 "。 

吕 回调 函数 

在 ajax 异步 请 求 中 , 由 于 不 知道 请 求 返回 的 具体 时 间 ， 而 通过 轮 询 去 判断 是 否 返 回 数据 , 这 
显然 是 不 理智 的 行为 。 所 以 我 们 通常 会 把 接 下 来 的 操作 放 在 回调 函数 中 , 传人 发 起 ajax 异步 请 求 
的 函数 。 当 数据 返回 之 后 ， 这 个 回调 函数 才 被 执行 ,这 也 是 好 莱 坞 原则 的 一 种 体现 。 把 需要 执行 
的 操作 封装 在 回调 函数 里 ,然后 把 主动 权 交 给 另外 一 个 函数 。 至 于 回调 函数 什么 时 候 被 执行 ， 则 
是 另外 一 个 函数 控制 的 。 


11.7” 真 的 需要 “继承 ” 吗 


模板 方法 模式 是 基于 继承 的 一 种 设计 模式 ， 父 类 封装 了 子 类 的 算法 框架 和 方法 的 执行 顺序 ， 
子 类 继承 父 类 之 后 , 父 类 通知 子 类 执行 这 些 方法 ,好莱坞 原则 很 好 地 诠释 了 这 种 设计 技巧 ， 即 高 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


11.7 真 的 需要 “继承 ” 吗 163 


层 组 件 调 用 底层 组 件 。 

本 章 我 们 通过 模板 方法 模式 ,编写 了 一 个 Coffee or Tea 的 例子 。 模 板 方法 模式 是 为 数 不 多 的 
基于 继承 的 设计 模式 ,但 JavaScript 语 言 实际 上 没有 提供 真正 的 类 式 继承 ， 继 承 是 通过 对 象 与 对 
象 之 间 的 委托 来 实现 的 。 也 就 是 说 ， 虽 然 我 们 在 形式 上 借鉴 了 提供 类 式 继承 的 语言 ,但 本 章 学 习 
到 的 模板 方法 模式 并 不 十 分 正宗 。 而 且 在 JavaScript 这 般 灵 活 的 语言 中 ， 实 现 这 样 一 个 例子 ， 是 
真 的 需要 继承 这 种 重 武器 呢 ? 

在 好 莱 坞 原则 的 指导 之 下 ， 下 面 这 段 代 码 可 以 达到 和 继承 一 样 的 效果 。 


var Beverage = function( param ){ 


/ 


var boilWater = function(){ 
console.1og( “把 水 孝 漳 ” ); 


3 


var brew = param.brew || function(){ 
throw new Error(“' 必 须 传递 brew 方法 ' );} 


}; 


var pourInCup = param.pourInCup || function(){ 
throw new Error(“' 必 须 传递 pourInCup 方法 ); 


月 


var addCondiments = param.addCondiments || function(){ 
throw new ETYTOoY( “必须 传递 addCondiments 方法 ); 


var F = function(){}; 


F.prototype.init = function(){ 
boilWater(); 
brew(); 
pourInCup(); 
addCondiments(); 

}; 


return F; 


下 


var Coffee = Beverage({ 

brew: function(){ 
console.log( ' 用 沸水 冲 泡 咖 啡 '); 

}, 

pourInCup: function(){ 
console.log(“' 把 咖啡 倒 进 杯 子 ' ) ; 

}, 

addCondiments: function(){ 
console.log(“' 加 糖 和 牛奶 ); 

} 


}); 
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var Tea = Beverage({ 
brew: function(){ 
console.log(' 用 沸水 浸泡 茶叶 ' ); 
}), 
pourInCup: function(){ 
console.log(' 把 茶 倒 进 杯子 ' ); 


3 
addCondiments: function(){ 
console.1og(“ 加 柠檬 ); 
} 
]); 


var coffee = new Coffee(); 
coffee.init(); 


var tea = new Tea(); 
tea.init(); 


在 这 段 代码 中 ， 我 们 把 brew、pourInCup、addCondiments 这 些 方法 依次 传人 Beverage 函数 ， 
Beverage 函数 被 调用 之 后 返回 构造 器 F。EF 类 中 包含 了 “模板 方法 ”F.prototype.init。 跟 继承 得 
到 的 效果 一 样 ， 该 “模板 方法 ”里 依然 封装 了 饮料 子 类 的 算法 框架 。 


11.8 小 结 


模板 方法 模式 是 一 种 典型 的 通过 封 凌 变化 提高 系统 扩展 和 


E 的 设计 模式 。 在 传统 的 面向 对 象 语 


言 中 , 一 个 运用 了 模板 方法 模式 的 程序 中 , 子 类 的 方法 种 类 和 执行 顺序 都 是 不 变 的 , 所 以 我 们 把 
这 部 分 逻辑 抽象 到 父 类 的 模板 方法 里 面 。 而 子 类 的 方法 具体 怎么 实现 则 是 可 变 的 , 于 是 我 们 把 这 
部 分 变化 的 逻辑 封装 到 子 类 中 。 通 过 增加 新 的 子 类 ,我们 便 能 给 系统 增加 新 的 功能 ， 并 不 需要 改 
动 抽象 父 类 以 及 其 他 子 类 ， 这 也 是 符合 开放 -封闭 原则 的 。 

但 在 JavaScript 中 ， 我 们 很 多 时 候 都 不 需要 依 样 画 台 地 去 实现 一 个 模版 方法 模式 ， 高 阶 函 数 


是 更 好 的 选择 。 
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享 元 (fyweight ) 模式 是 一 种 用 于 性 能 优化 的 模式 ,“Hy” 在 这 里 是 苍蝇 的 意思 ， 意 为 晶 量 
级 。 享 元 模式 的 核心 是 运用 共享 技术 来 有 效 支 持 大 量 细 粒度 的 对 象 。 

如 果 系 统 中 因为 创建 了 大 量 类 似 的 对 象 而 导致 内 存 占用 过 高 ， 享 元 模式 就 非常 有 用 了 。 在 
JavaScript 中 ， 浏 览 器 特别 是 移动 端的 浏览 器 分 配 的 内 存 并 不 算 多 ， 如 何 节 省 内 存 就 成 了 一 件 非 
常 有 意义 的 事情 。 

享 元 模式 的 概念 初 听 起 来 并 不 太 好 理解 ， 所 以 在 深入 讲解 之 前 ， 我 们 先 看 一 个 例子 。 


12.1 初 识 享 元 模式 


假设 有 个 内 衣 工 三， 目前 的 产品 有 50 种 男 式 内 衣 和 50 种 女士 内 衣 , 为 了 推销 产品 , 工厂 决 
定 生 产 一 些 塑 料 模特 来 穿 上 他 们 的 内 衣 拍 成 广告 照片。 正常 情况 下 需要 50 个 男模 特 和 50 个 女 
模特 ， 然 后 让 他 们 每 人 分 别 穿 上 一 件 内 衣 来 拍照 。 不 使 用 享 元 模式 的 情况 下 , 在 程序 里 也 许 会 这 
样 写 : 

var Model = function( sex, underwear){ 


this.sex = sex; 
this.underwear= underwear; 


了 


Model.prototype.takePhoto = function(){ 
console.log( 'sex= ' + this.sex + ' underwear=' + this.underwear); 


}; 


for ( var i = 1; i <= 50; i++ ){ 
var maleModel = new Model( 'male', 'underwear' + i ); 
maleModel .takePhoto(); 

}; 


for ( var j = 1; j <= 50; j++ ){ 
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var femaleModel= new Model( “female'， "underwear + j ); 
femaleModel.takepPhoto(); 

}; 

要 得 到 一 张 照 片 ， 每 次 都 需要 传人 sex 和 underwear 参数 ， 如 上 所 述 ， 现 在 一 共有 50 种 男 内 
衣 和 50 种 女 内 衣 ， 所 以 一 共 会 产生 100 个 对 象 。 如 果 将 来 生产 了 10000 种 内 衣 ， 那 这 个 程序 可 
能 会 因为 存在 如 此 多 的 对 象 已 经 提前 前 溃 。 

下 面 我 们 来 考虑 一 下 如 何 优化 这 个 场景 。 虽然 有 100 种 内 衣 ， 但 很 显然 并 不 需要 50 个 男 
模特 和 50 个 女 模特 。 其 实 男模 特 和 女 模特 各 自 有 一 个 就 足够 了 ， 他 们 可 以 分 别 穿 上 不 同 的 内 
衣 来 拍照 。 

现在 来 改写 一 下 代码 ， 既 然 只 需要 区 另 
移 除 ， 构 造 函 数 只 接收 sex 参数 : 


var Model = function( sex ){ 
this.sex = sex; 


}; 


| 男女 模特 ， 那 我 们 先 把 underwear 参数 从 构造 函数 中 


Model .prototype.takePhoto = function(){ 
console.log( 'sex= ' + this.sex + ' underwear=' + this.underwear); 


}; 
分 别 创建 一 个 男模 特 对 象 和 一 个 女 模特 对 象 : 


var maleModel = new Model( 'male' )， 
femaleModel = new Model( 'female' ); 


给 男模 特 依次 穿 上 所 有 的 男装 ， 并 进行 拍照 : 


for ( var i = 1; i <= 50; i++ ){ 
maleModel.underwear = 'underwear' + i; 
maleModel .takePhoto(); 

}; 


同样 ， 给 女 模特 依次 穿 上 所 有 的 女装 ， 并 进行 拍照 : 
for ( var j = 1; j <= 50; j++ ){ 


femaleModel.underwear = 'underwear' + j; 
femaleModel .takePhoto(); 


可 以 看 到 ， 改 进 之 后 的 代码 ， 只 需要 两 个 对 象 便 完 成 了 同样 的 功能 。 
12.2 ”内 部 状态 与 外 部 状态 


12.1 节 的 这 个 例子 便 是 享 元 模式 的 雏形 , 享 元 模式 要 求 将 对 象 的 属性 划分 为 内 部 状态 与 外 部 
状态 ( 状态 在 这 里 通常 指 属 性 ) 。 享 元 模式 的 目标 是 尽量 减少 共享 对 象 的 数量 , 关于 如 何 划 分 内 
部 状态 和 外 部 状态 ， 下 面 的 几 条 经 验 提 供 了 一 些 指引 。 
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口 内 部 状态 存储 于 对 象 内 部 。 
口 内 部 状态 可 以 被 一 些 对 象 共 享 。 


口 外 部 状态 取决 于 具体 的 场景 ， 并 根据 场景 


D 内 部 状态 独立 于 具体 的 场景 ， 通 常 不 会 改变 。 


变化 ， 外 部 状态 不 能 被 共享 。 


这 样 一 来 , 我 们 便 可 以 把 所 有 内 部 状态 相同 的 对 象 都 指定 为 同一 个 共享 的 对 象 。 而 外 部 状态 


可 以 从 对 象 身 上 和 剥离 出 来 ， 并 储存 在 外 部 。 


剥离 了 外 部 状态 的 对 象 成 为 共享 对 象 , 外 部 状态 在 必要 时 被 传人 共享 对 象 来 组 装 成 一 个 完整 
的 对 象 。 虽 然 组 装 外 部 状态 成 为 一 个 完整 对 象 的 过 程 需要 花费 一 定 的 时 间 , 但 却 可 以 大 大 减少 系 


统 中 的 对 象 数量 ,， 相 比 之 下 ， 这 点 时 间或 许 是 微不足道 的 。 因 此 ， 享 元 模式 是 一 种 用 时 间 换 空间 


的 优化 模式 。 


在 上 面 的 例子 中 , 性 别 是 内 部 状态 ,内衣 是 外 部 状态 ,通过 区 分 这 两 种 状态 ,大 大 减少 了 系 
统 中 的 对 象 数量 。 通常 来 讲 ， 内 部 状态 有 和 多少 种 组 合 ， 系 统 中 便 最 多 存在 多 少 个 对 象 ， 因 为 性 别 
通常 只 有 男女 两 种 ， 所 以 该 内 衣 厂 商 最 多 只 需要 2 个 对 象 。 


使 用 享 元 模式 的 关键 是 如 何 区 别 内 部 状态 和 外 部 状态 。 可 以 被 对 象 共 享 的 属性 通常 被 划分 为 


内 部 状态 , 如 同 不 管 什么 样式 的 衣服 , 都 可 以 按照 
模特 的 性 别 就 可 以 作为 内 部 状态 储存 在 共享 对 象 的 


E 别 不 同 , 穿 在 同一 个 男模 特 或 者 女 模 特 身上 ， 
内 部 。 而 外 部 状态 取决 于 具体 的 场景 , 并 根据 


场景 而 变化 ,就 像 例 子 中 每 件 衣服 都 是 不 同 的, 它们 不 能 被 一 些 对 象 共享 ， 因此 只 能 被 划分 为 外 


部 状态 。 
12.3” 享 元 模式 的 通用 结构 


12.1 节 的 示例 初步 展示 了 享 元 模式 的 威力 , 但 这 还 不 是 一 个 完整 的 享 元 模式 ,在 这 个 例子 中 


还 存在 以 下 两 个 问题 。 


就 需要 所 有 的 共享 对 象 。 


口 我 们 通过 构造 函数 显 式 new 出 了 男女 两 个 model 对 象 , 在 其 他 系统 中 , 也 许 并 不 是 一 开始 


口 给 model 对 象 手动 设置 了 underwear 外 部 状态 ， 在 更 复杂 的 系统 中 ， 这 不 是 一 个 最 好 的 方 
式 ， 因 为 外 部 状态 可 能 会 相当 复杂 ， 它 们 与 共享 对 象 的 联系 会 变 得 困难 。 


我 们 通过 一 个 对 象 工厂 来 解决 第 一 个 问题 ,只 有 当 某 种 共享 对 象 被 真正 需要 时 , 它 才 从 工厂 
中 被 创建 出 来 。 对 于 第 二 个 问题 ， 可 以 用 一 个 管理 器 来 记录 对 象 相关 的 外 部 状态 ,使 这 些 外 部 状 


态 通 过 某 个 钧 子 和 共享 对 象 联系 起 来 。 
12.4 文件 上 传 的 例子 


在 微 云 上 传 模块 的 开发 中 , 我 们 曾经 借助 享 元 模式 提升 了 程序 的 性 能 。 下 面 我 们 就 讲述 这 个 


例子 。 
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12.4.1 ”对象 爆 炸 


在 微 云 上 传 模块 的 开发 中 , 我 曾经 经 历 过 对 象 爆炸 的 问题 。 微 云 的 文件 上 传 功能 虽然 可 以 选 
择 依照 队列 ， 一 个 一 个 地 排队 上 传 ， 但 也 支持 同时 选择 2000 个 文件 。 每 一 个 文件 都 对 应 着 一 个 
JavaScript 上 传 对 象 的 创建 , 在 第 一 版 开发 中 , 的 确 往 程 序 里 同时 new 了 2000 个 upload 对 象 , 结 
果 可 想 而 知 ，Chrome 中 还 勉强 能 够 支撑 ，IE 下 直接 进入 假死 状态 。 

微 云 支持 好 几 种 上 传 方式 ， 比 如 浏览 器 插件 、Flash 和 表单 上 传 等 ， 为 了 简化 例子 ， 我 们 先 
假设 只 有 插件 和 Flash 这 两 种 。 不 论 是 插件 上 传 ， 还 是 Flash 上 传 ， 原理 都 是 一 样 的 ， 当 用 户 选 
择 了 文件 之 后 ， 插 件 和 Flash 都 会 通知 调用 Window 下 的 一 个 全 局 JavaScript 函数 ， 它 的 名 字 是 
startUpload, 用 户 选 择 的 文件 列表 被 组 合成 一 个 数组 files 塞 进 该 函数 的 参数 列表 里 , 代码 如 下 : 


var id = 0; 


window.startUpload = function( uploadType, files ){ // uploadType 区 分 是 控件 还 是 flash 
for ( var i = 0, file; file = files[ i++ ]; ){ 
var uploadobj = new Upload( uploadType, file.fileName, file.fileSize ); 
uploadObj.init( id++ ); // 给 upload 对 象 设置 一 个 唯一 的 id 


}; 


当 用 户 选 择 完 文件 之 后 ,startUpload 函数 会 遍历 files 数组 来 创建 对 应 的 upload 对 象 。 接 下 
来 定义 Upload 构造 函数 , 它 接受 3 个 参数 , 分别 是 插件 类 型 、 文 件 名 和 文件 大 小 。 这 些 信息 都 已 
经 被 插件 组 装 在 files 数组 里 返回 ， 代 码 如 下 : 


var Upload = function( uploadType, fileName, fileSize ){ 
this.uploadType = uploadType; 
this.fileName = fileName; 
this.fileSize = fileSize; 
this.dom= null; 


]; 


Upload.prototype.init = function( id ){ 
var that = this; 
this.id = id; 
this.dom = document.createElement( 'div' ); 
this.dom.innerHTML = 
'xspan> 文 件 名 称 :'+ this.fileName +'， 文件 大 小 : "+ this.fileSize +'</span>' + 
"<button class="delFile"> 删 除 </button>'; 


this.dom.querySelector( '.delFile' ).onclick = function(){ 
that.delFile(); 


} 
document .body.appendChild( this.dom ); 


外 


同样 为 了 简化 示例 ,我 们 暂且 去 掉 了 upload 对 象 的 其 他 功能 ， 只 保留 删除 文件 的 功能 ， 对 应 
的 方法 是 Upload.prototype.delFile。 该 方法 中 有 一 个 逻辑 : 当 被 删除 的 文件 小 于 3000 KB 时 ,该 文 
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件 将 被 直接 删除 。 否 则 页 面 中 会 弹出 一 个 提示 框 ， 提 示 用 户 是 否 确认 要 删除 该 文件 ， 代 码 如 下 : 
Upload.prototype.delFile = function(){ 


if ( this.fileSize < 3000 ){ 
return this.dom.parentNode.removeChild( this.dom ); 
} 


if ( window.confirm( “确定 要 删除 该 文件 吗 ? ' + this.fileName ) ){ 
return this.dom.parentNode.removeChild( this.dom ); 
} 


}; 
接 下 来 分 别 创建 3 个 插件 上 传 对 象 和 3 个 Flash 上 传 对 象 : 


startUpload( 'plugin', [ 


fileName: '1.txt', 
fileSize: 1000 


}, 
{ 
fileName: '2.html', 
fileSize: 3000 
}, 
{ 
fileName: '3.txt', 
fileSize: 5000 
} 
]); 
startUpload( 'flash', [ 
{ 
fileName: '4.txt', 
fileSize: 1000 
}, 
{ 
fileName: '5.html', 
fileSize: 3000 
}, 
{ 
fileName: '6.txt', 
fileSize: 5000 
} 
]); 


当 点 击 删除 最 后 一 个 文件 时 ， 可 以 看 到 弹出 了 是 否 确认 删除 的 提示 ， 如 图 12-1 所 示 。 


文件 名 称 :1. txt， 文 件 大 小 : 1000| 出 除 

文件 名 称 :2. html， 文 件 大 小 : 3000[ 出 除 ] ， JavaScript 
文件 名 称 :3. txt， 文 件 大 小 : 5000| 删除 
文件 名 称 :4. txt， 文 件 大 小 : 1000| 出 除 
文件 名 称 :5. html， 文 件 大 小 : 3000| 出 除 
文件 名 称 :6. txt， 文 件 大 小 : 5000| 删除 - - 


确定 要 逢 除 沪 文 件 茹 ? 2.html 


图 12-1 
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12.4.2 ” 享 元 模式 重 构 文 件 上 传 


上 一 节 的 代码 是 第 一 版 的 文件 上 传 , 在 这 段 代 码 里 有 多 少 个 需要 上 传 的 文件 ,就 一 共 创建 了 
多 少 个 upload 对 象 ， 接 下 来 我 们 用 享 元 模式 重 构 它 。 

首先 , 我 们 需要 确认 插件 类 型 uploadType 是 内 部 状态 , 那 为 什么 单单 uploadType 是 内 部 状态 
呢 ? 前 面 讲 过 ， 划 分 内 部 状态 和 外 部 状态 的 关键 主要 有 以 下 几 点 。 

口 内 部 状态 储存 于 对 象 内 部 。 

口 内 部 状态 可 以 被 一 些 对 象 共享 。 

口 内 部 状态 独立 于 具体 的 场景 ， 通 常 不 会 改变 。 

口 外 部 状态 取决 于 具体 的 场景 ， 并 根据 场景 而 变化 ， 外 部 状态 不 能 被 共享 。 

在 文件 上 传 的 例子 里 ，upload 对 象 必须 依赖 uploadType 属性 才能 工作 ， 这 是 因为 插件 上 传 、 
Flash 上 传 、 表 单 上 传 的 实际 工作 原理 有 很 大 的 区 别 ， 它 们 各 自 调用 的 接口 也 是 完全 不 一 样 的 ， 
必须 在 对 象 创建 之 初 就 明确 它 是 什么 类 型 的 插件 , 才 可 以 在 程序 的 运行 过 程 中 , 让 它们 分 别 调用 
各 自 的 start、pause、cancel 、del 等 方法 。 

实际 上 在 微 云 的 真实 代码 中 ， 虽 然 插 件 和 Flash 上 传 对 象 最 终 创 建 自 一 个 大 的 工厂 类 ， 但 它 
们 实际 上 根据 uploadType 值 的 不 同 ， 分 别 是 来 自 于 两 个 不 同类 的 对 象 。( 在 目前 的 例子 中 ， 为 了 
简化 代码 ， 我 们 把 插件 和 Flash 的 构造 函数 合并 成 了 一 个 。) 

一 旦 明确 了 uploadType， 无 论 我 们 使 用 什么 方式 上 传 ， 这 个 上 传 对 象 都 是 可 以 被 任何 文件 共 
用 的 。 而 fileName 和 filesize 是 根据 场景 而 变化 的 ， 每 个 文件 的 fileName 和 fileSize 都 不 一 样 ， 
fileName 和 filesize 没有 办 法 被 共享 ， 它们 只 能 被 划分 为 外 部 状态 。 


12.4.3 ”剥离 外 部 状态 


明确 了 uploadType 作为 内 部 状态 之 后 ， 我 们 再 把 其 他 的 外 部 状态 从 构造 函数 中 抽 离 出 来 ， 
Upload 构造 函数 中 只 保留 uploadType 参数 : 
var Upload = function( uploadType){ 
this.uploadType = uploadType; 
Upload.prototype.init 因数 也 不 再 需要 ， 因 为 upload 对 象 初始 化 的 工作 被 放 在 了 upload- 
Manager.add 函数 里 面 ， 接 下 来 只 需要 定义 Upload.prototype.del 函数 即 可 : 


Upload.prototype.delFile = function( id ){ 
uploadManager.setExternalState( id，this ); // (1) 


if ( this.filesize < 3000 ){ 
return this.dom.parentNode.removeChild( this.dom ); 


} 
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if ( window.confizrm( “确定 要 删除 该 文件 吗 ? ' + this.fileName ) ){ 
return this.dom.parentNode.removeChild( this.dom ); 
} 


二 
在 开始 删除 文件 之 前 ， 需 要 读 取 文件 的 实际 大 小 ， 而 文件 的 实际 大 小 被 储存 在 外 部 管理 需 


uploadManager 中 , 所 以 在 这 里 需要 通过 uploadManager.setExternalState 方 法 给 共享 对 象 设 置 正确 
的 filesize， 上 段 代码 中 的 (1) 处 表示 把 当前 id 对 应 的 对 象 的 外 部 状态 都 组 装 到 共享 对 象 中 。 


12.4.4 工厂 进行 对 象 实例 化 
接 下 来 定义 一 个 工厂 来 创建 upload 对 象 ， 如 果 某 种 内 部 状态 对 应 的 共享 对 象 已 经 被 创建 过 ， 
那么 直接 返回 这 个 对 象 ， 否 则 创建 一 个 新 的 对 象 : 


var UploadFactory = (function(){ 
var createdFlyWeight0bjs = {}; 


return { 
create: function( uploadType){ 
if ( createdFlyWeightobjs [ uploadType] ){ 
return citeatedF1yNeight0bjs [ uploadType]; 


return createdFlyWeightObjs [ uploadType] = new Upload( uploadType); 
} 


} 
])(); 


12.4.5 ”管理 器 封装 外 部 状态 


现在 我 们 来 完善 前 面 提 到 的 uploadManager 对 象 ， 它 负责 向 UploadFactory 提交 创建 对 象 的 请 
求 ， 并 用 一 个 uploadDatabase 对 象 保存 所 有 upload 对 象 的 外 部 状态 ， 以 便 在 程序 运行 过 程 中 给 
upload 共享 对 象 设 置 外 部 状态 ， 代 码 如 下 : 


var uploadManager = (function(){ 
var uploadDatabase = {}; 


return { 
add: function( id, uploadType, fileName, fileSize ){ 
var flyweight0bj = UploadFactory.create( uploadType ); 


var dom = document.createElement( 'div' ); 

dom.innerHTML = 
"<span> 文 件 名 称 :'+ fileName +'， 文件 大 小 : '+ fileSize +'</span>' + 
"<button class="delFile"> 删 除 </button>'; 


dom.querySelector( '.delFile' ).onclick = function(){ 
flyWeightObj.delFile( id ); 
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document .body.appendChild( dom ); 


uploadDatabase[ id ] = { 
fileName: fileName, 
fileSize: fileSize， 
dom: dom 


}; 


return flyWeight0bj ; 


}, 
setExternalState: function( id，flyweightobj ){ 
var uploadData = uploadDatabase[ id ]; 
for ( var i in uploadData ){ 
flyweightobj[ i ] = uploadData[ i ]; 


} 
DO; 
然后 是 开始 触发 上 传动 作 的 startupload 函数 : 


var id = 0; 


window.startUpload = function( uploadType, files ){ 
for ( var i = 0, file; file = files[ i++ ]; ){ 
var upload0bj = uploadManager.add( ++id, uploadType, file.fileName, file.fileSize ); 
} 
}; 
最 后 是 测试 时 间 ， 运 行 下 面 的 代码 后 ， 可 以 发 现 运行 结果 跟 用 享 元 模式 重 构 之 前 一 致 


startUpload( 'plugin', [ 
{ 


fileName: '1.txt', 
fileSize: 1000 


fileName: '2.html', 
fileSize: 3000 


fileName: '3.txt', 
fileSize: 5000 


startUpload( 'flash', [ 


fileName: '4.txt', 
fileSize: 1000 


}, 
{ 


fileName: '5.html', 
fileSize: 3000 


} 
{ 


fileName: '6.txt', 
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fileSize: 5000 
]); 


享 元 模式 重 构 之 前 的 代码 里 一 共 创 建 了 6 个 upload 对 象 ， 而 通过 享 元 模式 重 构 之 后 ， 对 象 的 数 
量 减 少 为 2， 更 幸运 的 是 ， 就 算 现 在 同时 上 传 2000 个 文件 ， 需 要 创建 的 upload 对 象 数量 依然 是 2。 


12.5 ” 享 元 模式 的 适用 性 


享 元 模式 是 一 种 很 好 的 性 能 优化 方案 , 但 它 也 会 带 来 一 些 复杂 性 的 问题 , 从 前 面 两 组 代码 的 
比较 可 以 看 到 ， 使 用 了 享 元 模式 之 后 ， 我 们 需要 分 别 多 维护 一 个 factory 对 象 和 一 个 manager 对 
象 ， 在 大 部 分 不 必要 使 用 享 元 模式 的 环境 下 ， 这 些 开 销 是 可 以 避免 的 。 

享 元 模式 带 来 的 好 处 很 大 程度 上 取决 于 如 何 使 用 以 及 何 时 使 用 , 一 般 来 说 ,以 下 情况 发 生 时 
便 可 以 使 用 享 元 模式 。 

口 一 个 程序 中 使 用 了 大 量 的 相似 对 象 。 

口 由 于 使 用 了 大 量 对 象 ， 造 成 很 大 的 内 存 开销 。 

口 对 象 的 大 多 数 状态 都 可 以 变 为 外 部 状态 。 

口 剥离 出 对 象 的 外 部 状态 之 后 ， 可 以 用 相对 较 少 的 共享 对 象 取代 大 量 对 象 。 
可 以 看 到 ， 文 件 上 传 的 例子 完全 符合 这 四 点 。 


12.6 ”再 谈 内 部 状态 和 外 部 状态 


如 果 顺 利 的 话 , 通过 前 面 的 例子 我 们 已 经 了 解 了 内 部 状态 和 外 部 状态 的 概念 以 及 享 元 模式 的 
工作 原理 。 我 们 知道 ,实现 享 元 模式 的 关键 是 把 内 部 状态 和 外 部 状态 分 离开 来 。 有 多 少 种 内 部 状 
态 的 组 合 ， 系统 中 便 最 多 存在 多 少 个 共享 对 象 ， 而 外 部 状态 储存 在 共享 对 象 的 外 部 ,在 必要 时 被 
传人 共享 对 象 来 组 装 成 一 个 完整 的 对 象 。 现 在 来 考虑 两 种 极端 的 情况 , 即 对 象 没有 外 部 状态 和 没 
有 内 部 状态 的 时 候 。 

12.6.1 没有 内 部 状态 的 享 元 

在 文件 上 传 的 例子 中 , 我 们 分 别 进行 过 插件 调用 和 Flash 调用 , 即 startUpload( 'plugin', [] ) 
和 startUpload( flash，[] )， 导 致 程序 中 创建 了 内 部 状态 不 同 的 两 个 共享 对 象 。 也 许 你 会 奇怪 ,在 
文件 上 传 程序 里 , 一 般 都 会 提前 通过 特性 检测 来 选择 一 种 上 传 方式 , 如 果 浏 览 右 支持 插件 就 用 插件 
上 传 ， 如 果 不 支持 插件 , 就 用 Flash 上 传 。 那么 , 什么 情况 下 既 需 要 插件 上 传 又 需要 Flash 上 传 呢 ? 

实际 上 这 个 需求 是 存在 的 , 很 多 网 盘 都 提供 了 极速 上 传 (控件 ) 与 普通 上 传 (Flash ) 两 种 模 
式 ， 如 果 极 速 上 传 不 好 使 ( 可 能 是 没有 安装 控件 或 者 控件 损坏 )， 用 户 还 可 以 随时 切换 到 普通 上 
传 模式 ， 所 以 这 里 确实 是 需要 同时 存在 两 个 不 同 的 upload 共享 对 象 。 

但 不 是 每 个 网 站 都 必须 做 得 如 此 复杂 , 很 多 小 一 些 的 网 站 就 只 支持 单一 的 上 传 方式 。 假设 我 
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们 是 这 个 网 站 的 开发 者 , 不 需要 考虑 极速 上 传 与 普通 上 传 之 间 的 切换 , 这 意味 着 在 之 前 的 代码 中 
作为 内 部 状态 的 uploadType 属性 是 可 以 删除 掉 的 。 


在 继续 使 用 享 元 模式 的 前 提 下 ， 构 造 函 数 Upload 就 变 成 了 无 参数 的 形式 : 


var Upload = function(){}; 


其 他 属性 如 fileName 、filesize 、dom 依然 可 以 作为 外 部 状态 保存 在 共享 对 象 外 部 。 在 
uploadType 作为 内 部 状态 的 时 候 , 它 可 能 为 控件 , 也 可 能 为 Flash, 所 以 当时 最 多 可 以 组 合 出 两 个 
共享 对 象 。 而 现在 已 经 没有 了 内 部 状态 ,这 意味 着 只 需要 唯一 的 一 个 共享 对 象 。 现 在 我 们 要 改写 

创建 享 元 对 象 的 工厂 ， 代 码 如 下 : 


var UploadFactory = (function(){ 
var upload0bj; 
return { 
create: function(){ 
if ( upload0bj ){ 
return Up1oad0bj; 


ee upload0bj = new Upload(); 
} 
}) 0; 
管理 器 部 分 的 代码 不 需要 改动 , 还 是 负责 剥离 和 组 装 外 部 状态 。 可 以 看 到 ， 当 对 象 没 有 内 部 
状态 的 时 候 , 生产 共享 对 象 的 工厂 实际 上 变 成 了 一 个 单 例 工 厂 。 虽然 这 时 候 的 共享 对 象 没有 内 部 


状态 的 区 分 ,但 还 是 有 剥离 外 部 状态 的 过 程 ， 我 们 依然 倾向 于 称 之 为 享 元 模式 。 


12.6.2 ”没有 外 部 状态 的 享 元 


网 上 许多 资料 中 ， 经 常 把 Java 或 者 C# 的 字符 串 看 成 享 元 ， 这 种 说 法 是 否 正确 呢 ? 我 们 看 看 
下 面 这 段 Java 代码 ， 来 分 析 一 一 下 : 


// Java 代码 


public class Test { 


public static void main( String args[] ){ 
String al = new String( "a" ).intern(); 
String a2 = new String( "a" ).intern(); 
System.out.println( al == a2 ); // true 
h 
} 


在 这 段 Java 代码 里 ， 分别 new 了 两 个 字符 串 对 象 ai 和 a2。intern 是 一 种 对 象 池 技 术 ， new 
String("a").intern() 的 含义 如 下 。 


口 如 果 值 为 a 的 字符 串 对 象 已 经 存在 于 对 象 池 中 ， 则 返回 这 个 对 象 的 引用 。 
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口 反之 ， 将 字符 串 a 的 对 象 添 加 进 对 象 池 ， 并 返回 这 个 对 象 的 引用 。 

所 以 ai == a2 的 结果 是 true， 但 这 并 不 是 使 用 了 享 元 模式 的 结果 ， 享 元 模式 的 关键 是 区 别 内 部 
状态 和 外 部 状态 。 享 元 模式 的 过 程 是 剥离 外 部 状态 ， 并 把 外 部 状态 保存 在 其 他 地 方 ， 在 合适 的 时 刻 
再 把 外 部 状态 组 装 进 共 享 对 象 。 这 里 并 没有 剥离 外 部 状态 的 过 程 , al 和 a2 指向 的 完全 就 是 同一 个 对 
象 ， 所 以 如 果 没 有 外 部 状态 的 分 离 ， 即 使 这 里 使 用 了 共享 的 技术 ,但 并 不 是 一 个 纯粹 的 享 元 模式 。 


12.7” 对象 池 


我 们 在 前 面 已 经 提 到 了 Java 中 string 的 对 象 池 ， 下 面 就 来 学 习 这 种 共享 的 技术 。 对 象 池 维 
护 一 个 装载 空闲 对 象 的 池子 ， 如 果 需 要 对 象 的 时 候 ， 不 是 直接 new， 而 是 转 从 对 象 池 里 获取 。 如 
果 对 象 池 里 没有 空闲 对 象 ， 则 创建 一 个 新 的 对 象 ， 当 获取 出 的 对 象 完成 它 的 职责 之 后 ， 再 进入 
池子 等 待 被 下 次 获取 。 

对 象 池 的 原理 很 好 理解 ， 比 如 我 们 组 人 手 一 本 《JavaScript 权威 指南 》 从 节约 的 角度 来 讲 ， 
这 并 不 是 很 划算 , 因为 大 部 分 时 间 这 些 书 都 被 闲置 在 各 自 的 书架 上 ,所 以 我 们 一 开始 就 只 买 一 本 ， 
或 者 一 起 建立 一 个 小 型 图 书馆 ( 对 象 池 )， 需 要 看 书 的 时 候 就 从 图 书馆 里 借 ， 看 完了 之 后 再 把 书 
还 回 图 书馆 。 如 果 同 时 有 三 个 人 要 看 这 本 书 ， 而 现在 图 书馆 里 只 有 两 本 , 那 我 们 再 马上 去 书店 买 
一 本 放 入 图 书馆 。 

对 象 池 技术 的 应 用 非常 广泛 , HTTP 连接 池 和 数据 库 连 接 池 都 是 其 代表 应 用 。 在 Web 前 端 开 
发 中 ， 对 象 池 使 用 最 多 的 场景 大 概 就 是 跟 DOM 有 关 的 操作 。 很 多 空间 和 时 间 都 消耗 在 了 DOM 
节点 上 ， 如 何 避 免 频 繁 地 创建 和 删除 DOM 节点 就 成 了 一 个 有 意义 的 话题 。 


12.7.1 对象 池 实 现 


假设 我 们 在 开发 一 个 地 图 应 用 , 地 图 上 经 常会 出 现 一 些 标志 地 名 的 小 气泡 ,我 们 叫 它 toolTip。 
如 图 12-2 所 示 。 


网 12-2 
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在 搜索 我 家 附近 地 图 的 时 候 ， 页 面 里 出 现 了 2 个 小 气泡 。 当 我 再 搜索 附近 的 兰州 拉面 馆 时 ， 
页 面 中 出 现 了 6 个 小 气泡 。 按照 对 象 池 的 思想 ,在 第 二 次 搜索 开始 之 前 ， 并 不 会 把 第 一 次 创建 的 
2 个 小 气泡 删除 掉 ， 而 是 把 它们 放 进 对 象 池 。 这 样 在 第 二 次 的 搜索 结果 页 面 里 ， 我 们 只 需要 再 创 
建 4 个 小 气泡 而 不 是 6 个 ， 如 图 12-3 所 示 。 
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先 定 义 一 个 获取 小 气泡 节点 的 工厂 ， 作 为 对 象 池 的 数组 成 为 私有 属性 被 包含 在 工厂 闭 包 里 ， 
这 个 工厂 有 两 个 暴露 对 外 的 方法 , create 表示 获取 一 个 div 节点 ,recover 表示 回收 一 个 div 节点 : 


var toolTipFactory = (function(){ 
var toolTipPool = []; // toolTip 对 象 池 


return { 
create: function(){ 
if ( toolTipPool.length === 0 ){ // 如 果 对 象 池 为 空 
var div = document.createElement( 'div' ); // 创建 一 个 dom 
document .body.appendChild( div ); 
return div; 
}else{f ”// 如 果 对 象 池 里 不 为 空 
return toolTipPool.shift(); // 则 从 对 象 池 中 取出 一 个 dom 
} 
}), 


recover: function( tooltipDom ){ 
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return toolTipPool.push( tooltipDom ); // 对 象 池 回收 dom 
} 


} 
])(); 


现在 把 时 钟 拨 回 进行 第 一 次 搜索 的 时 刻 ， 目 前 需要 创建 2 个 小 气泡 节点 ,为 了 方便 回收 , 用 
一 个 数组 ary 来 记录 它们 : 


var ary = []; 


for ( var i = 0, str; str = [ 'A', 'B' ][ it+ ]; ){ 
var toolTip = toolTipFactory.create(); 
toolTip.innerHTML = str; 
ary.push( toolTip ); 


如 果 你 愿意 稍稍 测试 一 下 ,可 以 看 到 页 面 中 出 现 了 innerHTML 分 别 为 A 和 了 B 的 两 个 div 节点 。 
接 下 来 假设 地 图 需要 开始 重新 绘制 ， 在 此 之 前 要 把 这 两 个 节点 回收 进 对 象 池 : 


for ( var i = 0, toolTip; toolTip = ary[ i++ ]; ){ 
toolTipFactory.recover( toolTip ); 
}; 


再 创建 6 个 小 气泡 : 

for (vari=0stristr=[ 'A', 'B', 'C', 'D', 'E', 'F' ][ it+ ]; ){ 
var toolTip = toolTipFactory.create(); 
toolTip.innerHTML = str; 


}; 


现在 再 测试 一 番 ， 页 面 中 出 现 了 内 容 分 别 为 A、B、C、D、E、F 的 6 个 节点 ， 上 一 次 创建 
好 的 节点 被 共享 给 了 下 一 次 操作 。 对象 池 跟 享 元 模式 的 思想 有 点 相似 , 虽然 innerHTML 的 值 A、B、 
C、D 等 也 可 以 看 成 节点 的 外 部 状态 , 但 在 这 里 我 们 并 没有 主动 分 离 内 部 状态 和 外 部 状态 的 过 程 。 


12.7.2 ”通用 对 象 池 实现 
我 们 还 可 以 在 对 象 池 工厂 里 ， 把 创建 对 象 的 具体 过 程 封 装 起 来 ， 实 现 一 个 通用 的 对 象 池 : 


var objectPoolFactory = function( createObjFn ){ 
var objectPool = []; 


return { 
create: function(){ 
var obj = objectPool.length === 0 ? 
createObjFn.apply( this, arguments ) : objectPool.shift(); 


return obj; 

}), 

recover: function( obj ){ 
objectPool .push( obj ); 
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}; 
现在 利用 objectPoolFactory 来 创建 一 个 装载 一 些 iframe 的 对 象 池 : 
var iframeFactory = objectPoolFactory( function(){ 


var iframe = document.createElement( 'iframe' ); 
document .body.appendChild( iframe ); 


iframe.onload = function(){ 
iframe.onload = null; // 防止 iframe 重复 加 载 的 bug 
iframeFactory.recover( iframe ); // iframe 加 载 完成 之 后 回收 节点 


} 


return iframe; 


}); 


var iframe1 
iframe1.src 


iframeFactory.create(); 
'http:// baidu.com '; 


var iframe2 
iframe2.src 


iframeFactory.create(); 
‘http:// 00.com ; 


setTimeout(function(){ 
var iframe3 = iframeFactory.create(); 
iframe3.src = “http:// 163.com'; 
区 3000 ); 
对 象 池 是 另外 一 种 性 能 优化 方案 , 它 跟 享 元 模式 有 一 些 相 似 之 处 , 但 没有 分 离 内 部 状态 和 外 
部 状态 这 个 过 程 。 本 章 用 享 元 模式 完成 了 一 个 文件 上 传 的 程序 ， 其 实 也 可 以 用 对 象 池 + 事 件 委托 
来 代替 实现 。 


hl 


12.8 小 结 


享 元 模式 是 为 解决 性 能 问题 而 生 的 模式 ,这 跟 大 部 分 模式 的 诞生 原因 都 不 一 样 。 在 一 个 存在 
大 量 相似 对 象 的 系统 中 ， 享 元 模式 可 以 很 好 地 解决 大 量 对 象 带 来 的 性 能 问题 。 
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职责 链 模式 


内 责 链 模式 的 定义 是 : 使 多 个 对 象 都 有 机 会 处 理 请 求 , 从 而 避免 请 求 的 发 送 者 和 接收 者 之 间 
的 耦合 关系 ， 将 这 些 对 象 连 成 一 条 链 ， 并 治 着 这 条 链 传递 该 请 求 ， 直 到 有 一 个 对 象 处 理 它 为 止 。 

职责 链 模式 的 名 字 非 常 形象 , 一 系列 可 能 会 处 理 请 求 的 对 象 被 连接 成 一 条 链 , 请求 在 这 些 对 
象 之 间 依 次 传递 , 直到 遇 到 一 个 可 以 处 理 它 的 对 象 , 我 们 把 这 些 对 象 称 为 链 中 的 节点 , 如 图 13-1 
所 示 。 


图 13-1 


13.1 现实 中 的 职责 链 模式 


职责 链 模式 的 例子 在 现实 中 并 不 难 找到 ， 以 下 就 是 两 个 常见 的 跟 职责 链 模式 有 关 的 场景 。 

口 如 果 早 高 峰 能 顺利 挤 上 公交 车 的 话 ， 那 么 估计 这 一 天 都 会 过 得 很 开心 。 因 为 公交 车 上 人 
实在 太 多 了 ， 经常 上 车 后 却 找 不 到 售票 员 在 哪 ， 所 以 只 好 把 两 块 钱 硬币 往 前 面 递 。 除 非 
你 运气 够 好 ， 站 在 你 前 面 的 第 一 个 人 就 是 售票 员 ， 否 则 ， 你 的 硬币 通常 要 在 N 个 人 手 上 
传递 ， 才 能 最 终 到 达 售 票 员 的 手 里 。 

口 中 学 时 代 的 期 末 考 试 ， 如 果 你 平时 不 太 老 实 ， 考 试 时 就 会 被 安排 在 第 一 个 位 置 。 遇 到 不 
会 答 的 题目 ， 就 把 题目 编号 写 在 小 纸 条 上 往 后 传递 ， 坐 在 后 面 的 同学 如 果 也 不 会 答 ， 他 
就 会 把 这 张 小 纸 条 继续 递 给 他 后 面 的 人 。 
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从 这 两 个 例子 中 , 我 们 很 容易 找到 职责 链 模式 的 最 大 优点 : 请 求 发 送 者 只 需要 知道 链 中 的 第 
一 个 节点 ,从 而 弱化 了 发 送 者 和 一 组 接收 者 之 间 的 强 联系 。 如 果 不 使 用 职责 链 模 式 , 那么 在 公交 
车 上 , 我 就 得 先 搞 清 楚 谁 是 售票 员 ， 才 能 把 硬币 递 给 人 他。 同样 ， 在 期 末 考 试 中 ， 也 许 我 就 要 和 完了 
解 同学 中 有 哪些 可 以 解答 这 道 题 。 


请 帮 我 WV 
省 一 下 公交 ) 


io es 
党 


4 


UU 


人 


13.2 ”实际 开发 中 的 职责 链 模式 


假设 我 们 负责 一 个 售卖 手机 的 电 商 网 站 , 经 过 分 别 交纳 500 元 定金 和 200 元 定金 的 两 轮 预定 
后 (订单 已 在 此 时 生成 )， 现 在 已 经 到 了 正式 购买 的 阶段 。 


公司 针对 支付 过 定金 的 用 户 有 一 定 的 优惠 政策 。 在 正式 购买 后 , 已 经 支付 过 500 元 定金 的 用 
会 收 到 100 元 的 商城 优惠 券 , 200 元 定金 的 用 户 可 以 收 到 50 元 的 优惠 券 , 而 之 前 没有 支付 定金 
ee 也 就 是 没有 优惠 券 ， 且 在 库存 有 限 的 情况 下 不 一 定 保证 能 买 到 。 


我 们 的 订单 页 面 是 PHP 吐出 的 模板 ， 在 页 面 加 载 之 初 ，PHP 会 传递 给 页 面 几 个 字段 。 


口 orderType: 表示 订单 类 型 (定金 用 户 或 者 普通 购买 用 户 )，code 的 值 为 1 的 时 候 是 500 元 
定金 用 户 ， 为 2 的 时 候 是 200 元 定金 用 户 ， 为 3 的 时 候 是 普通 购买 用 户 。 

D pay: 表示 用 户 是 否 已 经 支付 定金 ， 值 为 true 或 者 false, 虽然 用 户 已 经 下 过 500 元 定金 的 
订单 ， 但 如 果 他 一 直 没 有 支付 定金 ， 现 在 只 能 降级 进入 普通 购买 模式 。 

口 stock: 表示 当前 用 于 普通 购买 的 手机 库存 数量 ,已 经 支付 过 500 元 或 者 200 元 定金 的 用 
户 不 受 此 限制 。 


下 面 我 们 把 这 个 流程 写成 代码 : 


var order = function( orderType, pay, stock ){ 
if ( orderType === 1 ){ // 500 元 定金 购买 模式 
if ( pay === true ){ // 已 支付 定金 
console.1og( '500 元 定金 预购 ， 得 到 100 优惠 券 ' ); 
}else{ // 未 支付 定金 ， 降 级 到 普通 购买 模式 
if ( stock > 0 ){ ”// 用 于 普通 购买 的 手机 还 有 库存 
console.log( ' 普 通 购买 ， 无 优惠 券 ' ); 
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}else{ 
console.log( ' 手 机 库存 不 足 '); 
} 


} 
} 


else if ( orderType === 2 ){ // 200 元 定金 购买 模式 
if ( pay === true ){ 
console.log( '200 元 定金 预购 ， 得 到 50 优惠 券 ' ) ; 
}else{ 
if ( stock > 0 ){ 
console.log( ' 普 通 购买 ， 无 优惠 券 ，); 
}else{ 
console.1og(“' 手 机 库存 不 足 ' ); 
} 


} 


else if ( orderType === 3 ){ 
if ( stock > 0 ){ 
console.1og( “普通 购买 ， 无 优惠 券 ' ); 
}else{ 
console.log( ' 手 机 库存 不 足 ' ); 
} 


} 
Ie: 


order( 1 ，true，500); // 输出 : ” 500 元 定金 预购 ， 得 到 100 优惠 券 

虽然 我 们 得 到 了 意料 中 的 运行 结果 ， 但 这 远 远 算 不 上 一 段 值得 夸奖 的 代码 。order 函数 不 仅 
巨大 到 难以 阅读 ， 而 且 需 要 经 常 进行 修改 。 虽 然 目 前 项 目 能 正常 运行 , 但 接 下 来 的 维护 工作 无 疑 
是 个 梦 许 。 疏 人 只 有 最 “新 手 ”的 程序 员 才 会 写 出 这 样 的 代码 。 


13.3 ”用 职责 链 模式 重 构 代 码 

现在 我 们 采用 职责 链 模式 重 构 这 段 代 码 ， 先 把 500 元 订单 、200 元 订单 以 及 普通 购买 分 成 3 
个 函数 。 

接 下 来 把 orderType、pay 、stock 这 3 个 字段 当 作 参数 传递 给 500 元 订单 函数 ， 如 果 该 函数 不 
符合 处 理 条 件 , 则 把 这 个 请 求 传递 给 后 面 的 200 元 订单 函数 ， 如 果 200 元 订单 函数 依然 不 能 处 理 
该 请 求 ， 则 继续 传递 请 求 给 普通 购买 函数 ， 代 码 如 下 : 


// 500 元 订单 


var order500 = function( orderType, pay, stock ){ 
if ( orderType === 1 && pay === true ){ 
console.log( '500 元 定金 预购 ， 得 到 100 优惠 券 ，); 
}else{ 
order200( orderType, pay,，stock );  ”// 将 请 求 传递 给 200 元 订单 
} 
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下 
// 200 元 订单 


var order200 = function( orderType, pay, stock ){ 
if ( orderType === 2 && pay === true ){ 
console.log( '200 元 定金 预购 ， 得 到 50 优惠 券 ' ) ; 
}else{ 
orderNormal( orderType, pay, stock ); // 将 请 求 传递 给 普通 订单 
} 


和 
// 普通 购买 订单 


var orderNormal = function( orderType, pay, stock ){ 
if ( stock > 0 ){ 
console.log( “普通 购买 ， 无 优惠 券 '” ); 
}else{ 
console.log( ' 手 机 库存 不 足 ' ); 
} 


}; 

// 测试 结果 : 

order500( 1 , true, 500); // 输出 : 500 元 定金 预购 ， 得 到 100 优惠 券 

order500( 1，false，500 );  // 输出 : 普通 购买 ， 无 优惠 券 

order500( 2，true，500 ); ”// 输出 : 200 元 定金 预购 ， 得 到 500 优惠 券 

order500( 3，false，500 );  // 输出 : 普通 购买 ， 无 优惠 券 

order500( 3, false, 0 ); // 输出 : 手机 库存 不 足 

可 以 看 到 ， 执 行 结果 和 前 面 那 个 巨大 的 order 函数 完全 一 样 ， 但 是 代码 的 结构 已 经 清晰 了 很 
多 ， 我 们 把 一 个 大 函数 拆 分 了 3 个 小 函数 ， 去 掉 了 许多 仍 套 的 条 件 分 支 语句 。 


目前 已 经 有 了 不 小 的 进步 ， 但 我 们 不 会 满足 于 此 ， 虽 然 已 经 把 大 函数 拆 分 成 了 互 不 影响 的 3 
个 小 函数 , 但 可 以 看 到 ,请求 在 链条 传递 中 的 顺序 非常 伪 硬 , 传递 请 求 的 代码 被 厢 合 在 了 业务 也 
数 之 中 : 


var order500 = function( orderType, pay, stock ){ 
if ( orderType === 1 8& pay === true ){ 
console.log( '500 元 定金 预购 ， 得 到 100 优惠 券 ' ); 
}else{ 
order200( orderType, pay, stock ); 
// order200 和 order500 耦合 在 一 起 


} 
}; 
这 依然 是 违反 开放 -封闭 原则 的 ， 如 果 有 天 我 们 要 增加 300 元 预订 或 者 去 掉 200 元 预订 ， 意 
味 着 就 必须 改动 这 些 业 务 函 数 内 部 。 就 像 一 根 环 环 相 扣 打 了 死结 的 链条 ， 如 果 要 增加 、 拆 除 或 者 
移动 一 个 节点 ， 就 必须 得 先 砸 烂 这 根 链条 。 
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13.4 灵活 可 拆 分 的 职责 链 节点 AS 


本 节 我 们 采用 一 种 更 灵活 的 方式 , 来 改进 上 面 的 职责 链 模式 ， 目 标 是 让 链 中 的 各 个 节点 可 以 
灵活 拆 分 和 重组 。 


首先 需要 改写 一 下 分 别 表示 3 种 购买 模式 的 节点 函数 ,我 们 约定 ,如果 某 个 节点 不 能 处 理 请 
求 ， 则 返回 一 个 特定 的 字符 串 'nextSuccessor' 来 表示 该 请 求 需 要 继续 往 后 面 传递 


var order500 = function( orderType, pay, stock ){ 
if ( orderType === 1 && pay === true ){ 
console.log( '500 元 定金 预购 ， 得 到 100 优惠 券 ，); 
}else{ 
return 'nextSuccessor'; // 我 不 知道 下 一 个 节点 是 谁 ， 反 正 把 请 求 往 后 面 传递 
} 


> 


var order200 = function( orderType, pay, stock ){ 
if ( orderType === 2 && pay === true ){ 
console.1og( '200 元 定金 预购 ， 得 到 50 优惠 券 ' ); 
}else{ 
return 'nextSuccessor'; // 我 不 知道 下 一 个 节点 是 谁 ， 反 正 把 请 求 往 后 面 传递 
} 


下 


var orderNormal = function( orderType, pay, stock ){ 
if ( stock > 0 ){ 
console.log( ' 首 通 购买 ， 无 优惠 券 ' ) ; 
}else{ 
console.log( ' 手 机 库存 不 足 ' ); 
} 


上 


接 下 来 需要 把 函数 包装 进 职责 链 节点 , 我 们 定义 一 个 构造 函数 Chain, 在 new Chain 的 时 候 传 


同时 它 还 拥有 一 个 实例 属性 this.successor， 表 示 在 链 中 的 下 
节点 


全 感 o 


此 外 chain 的 prototype 中 还 有 两 个 函数 ， 它 们 的 作用 如 下 所 示 : 


// Chain.prototype.setNextSuccessor 指定 在 链 中 的 下 一 个 节点 
// Chain.prototype.passRequest 传递 请 求 给 某 个 节点 


var Chain = function( fn ){ 
this.fn = fn; 
this.successor = null; 


Bs 


Chain.prototype.setNextSuccessor = function( successor ){ 
return this.successor = successor; 
}; 


Chain.prototype.passRequest = function(){ 
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var ret = this.fn.apply( this, arguments ); 


if ( ret === 'nextSuccessor' ){ 
return this.successor 8&& this.successor.passRequest.apply( this.successor, arguments ); 
} 


return ret; 


现在 我 们 把 3 个 订单 函数 分 别 包装 成 职责 链 的 节点 : 


var chainOrder500 = new Chain( order500 ); 
var chainOrder200 = new Chain( order200 ); 
var chainOrderNormal = new Chain( orderNormal ); 


然后 指定 节点 在 职责 链 中 的 顺序 : 


chainOrder500.setNextSuccessor( chainOrder200 ); 
chainOrder200.setNextSuccessor( chainOrderNormal ); 


最 后 把 请 求 传递 给 第 一 个 节点 : 


chainOrder500.passRequest( 1, true, 500 ); // 输出 : 500 元 定金 预购 ， 得 到 100 优惠 券 
chainOrder500.passRequest( 2, true, 500 ); // 输出 : 200 元 定金 预购 ， 得 到 50 优惠 券 
chainOrder500.passRequest( 3, true, 500 ); // 给 出 : 普通 购买 ， 无 优惠 券 
chainOrder500.passRequest( 1, false, 0 ); // 输出 : 手机 库存 不 足 


通过 改进 , 我 们 可 以 自由 灵活 地 增加 、 移 除 和 修改 链 中 的 节点 顺序 , 假如 某 天 网 站 运营 人 员 
又 想 出 了 支持 300 元 定金 购买 ， 那 我 们 就 在 该 链 中 增加 一 个 节点 即 可 : 


var order300 = function(){ 
// 有 具体 实现 略 


1 


}; 


chainOrder300= new Chain( order300 ); 
chainOrder500.setNextSuccessor( chainOrder300); 
chainOrder300.setNextSuccessor( chainOrder200); 


对 于 程序 员 来 说 , 我 们 总 是 喜欢 去 改动 那些 相对 容易 改动 的 地 方 , 就 像 改 动 框架 的 配置 文件 
远 比 改动 框架 的 源 代码 简单 得 多 。 在 这 里 完全 不 用 理会 原来 的 订单 函数 代码 , 我 们 要 做 的 只 是 增 
加 一 个 节点 ， 然 后 重新 设置 链 中 相关 节点 的 顺序 。 


13.5 ”异步 的 职责 链 


在 上 一 市 的 职责 链 模 式 中 ,我 们 让 每 个 节点 函数 同步 返回 一 个 特定 的 值 "nextsuccessor"， 来 表示 
是 否 把 请 求 传递 给 下 一 个 节点 。 而 在 现实 开发 中 ， 我 们 经 常 0 问题 ， 比 如 我 们 要 在 
节点 函数 中 发 起 一 个 ajax 异步 请 求 ， 异 步 请 求 返 回 的 结果 才能 决定 是 否 继续 在 只 责 链 中 passRequest。 


这 时 候 让 节点 函数 同步 返回 "nextSuccessor" 已 经 没有 意义 了 ， 所 以 要 给 Chain 类 再 增加 一 个 
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原型 方法 Chain.prototype.next ， 表 示 手 动 传递 请 求 给 职责 链 中 的 下 一 个 节点 : 


Chain.prototype.next= function(){ 
return this.successor 8& this.successor.passRequest.apply( this.successor, arguments ); 


来 看 一 个 异步 职责 链 的 例子 : 


var fn1 = new Chain(function(){ 
console.log( 1 ); 
return 'nextSuccessor'; 


}); 


var fn2 = new Chain(function(){ 
console.log( 2 ); 
var self = this; 
setTimeout(function(){ 
self.next(); 
}, 1000 ); 


}); 


var fn3 = new Chain(function(){ 
console.log( 3 ); 
}); 


fn1i.setNextSuccessor( fn2 ).setNextSuccessor( fn3 ); 
fn1.passRequest(); 


现在 我 们 得 到 了 一 个 特殊 的 链条 , 请 求 在 链 中 的 节点 里 传递 , 但 节点 有 权利 决定 什么 时 候 把 
请 求 交 给 下 一 个 节点 。 可 以 想象 , 异步 的 职责 链 加 上 命令 模式 (把 ajax 请 求 封装 成 命令 对 象 , 详 
情 请 参考 第 9 章 )， 我 们 可 以 很 方便 地 创建 一 个 异步 ajax 队列 库 。 


13.6 ”职责 链 模式 的 优 缺 点 


前 面 已 经 说 过 ， 职 责 链 模式 的 最 大 优点 就 是 解 簿 了 请 求 发 送 者 和 N 个 接收 者 之 间 的 复杂 关 
系 , 由 于 不 知道 链 中 的 哪个 节点 可 以 处 理 你 发 出 的 请 求 , 所 以 你 只 需 把 请 求 传递 给 第 一 个 节点 即 
可 ， 如 图 13-2 和 图 13-3 所 示 。 


A 
B 
请 求 
C 
D 
图 13-2 
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me 


用 职责 链 模式 改进 后 : 


~ 


在 手机 商城 的 例子 中 ,本 来 我 们 要 被 迫 维护 一 个 充斥 着 条 件 分 支 语句 的 巨大 的 函数 , 在 例子 
里 的 购买 过 程 中 只 打印 了 一 条 log 语句 。 其 实在 现实 开发 中 ， 这 里 要 做 更 多 事情 ， 比 如 根据 订单 
种 类 弹出 不 同 的 浮 层 提示 、 泻 染 不 同 的 UI 节点、 组合 不 同 的 参数 发 送 给 不 同 的 cgi 等 。 用 了 职 
责 链 模 式 之 后 ， 每 种 订单 都 有 各 自 的 处 理 函 数 而 互 不 影响 。 


其 次 , 使 用 了 职责 链 模式 之 后 ， 链 中 的 节点 对 象 可 以 灵活 地 拆 分 重组 。 增 加 或 者 删除 一 个 节 
点 , 或 者 改变 节点 在 链 中 的 位 置 都 是 轻而易举 的 事情 。 这 一 点 我 们 也 已 经 看 到 , 在 上 面 的 例子 中 ， 
增加 一 种 订单 完全 不 需要 改动 其 他 订单 函数 中 的 代码 。 

职责 链 模式 还 有 一 个 优点 , 那 就 是 可 以 手动 指定 起 始 节 点 ,请求 并 不 是 非得 从 链 中 的 第 一 个 
节点 开始 传递 。 比 如 在 公交 车 的 例子 中 ， 如果 我 明确 在 我 前 面 的 第 一 个 人 不 是 售票 员 ， 那 我 当然 
可 以 越过 他 把 公交 卡 递 给 他 前 面 的 人 , 这 样 可 以 减少 请 求 在 链 中 的 传递 次 数 , 更 快 地 找到 合适 的 
请 求 接受 者 。 这 在 普通 的 条 件 分 支 语句 下 是 做 不 到 的 ,我 们 没有 办 法 让 请 求 越过 某 一 个 if 判断 。 

拿 代码 来 证 明 这 一 点 , 假设 某 一 天 网 站 中 支付 过 定金 的 订单 已 经 全 部 结束 购买 流程 , 我 们 在 
接 下 来 的 时 间 里 只 需要 处 理 普 通 购 买 订单 ， 所 以 我 们 可 以 直接 把 请 求 交 给 普通 购买 订单 节点 : 


orderNormal.passRequest( 1, false, 500 ); // 普通 购买 ， 无 优惠 券 


如 果 运 用 得 当 ， 职责 链 模 式 可 以 很 好 地 帮助 我 们 组 织 代码 , 但 这 种 模式 也 并 非 没有 星 端 ， 首 
先 我 们 不 能 保证 某 个 请 求 一 定 会 被 链 中 的 节点 处 理 。 比 如 在 期 未 考试 的 例子 中 , 小 纸 条 上 的 题目 
也 许 没有 任何 一 个 同学 知道 如 何 解 答 ， 此 时 的 请 求 就 得 不 到 答复 ,而 是 径直 从 链 尾 离开 , 或 者 抛 
出 一 个 错误 异常 。 在 这 种 情况 下 , 我 们 可 以 在 链 尾 增加 一 个 保底 的 接受 者 节点 来 处 理 这 种 即将 离 
开 链 尾 的 请 求 。 

另外 ,职责 链 模式 使 得 程序 中 多 了 一 些 节 点 对 象 , 可 能 在 某 一 次 的 请 求 传递 过 程 中 , 大 部 分 
节点 并 没有 起 到 实质 性 的 作用 ,它们 的 作用 仅仅 是 让 请 求 传递 下 去 ， 从 性 能 方面 考虑 , 我 们 要 避 
免 过 长 的 职责 链 带 来 的 性 能 损耗 。 


13.7 用 AOP 实现 职责 链 


在 之 前 的 职责 链 实现 中 ,我 们 利用 了 一 个 chain 类 来 把 普通 函数 包装 成 职责 链 的 节点 。 其 实 
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利用 JavaScript 的 函数 式 特性 ， 有 一 种 更 加 方便 的 方法 来 创建 职责 链 。 


下 面 我 们 改写 一 下 3.2.3 节 Function. 0 after 函数 ,使 得 第 一 个 函数 返回 'nextSsuccessor' 
时 ， 将 请 求 继续 传递 给 下 一 个 函数 ， 无 论 是 返回 字符 串 'nextSsuccessor ' 或 者 false 都 只 是 一 个 约 
定 ， 当 然 在 这 里 我 们 也 可 以 让 函数 返回 false a 选择 'nextSuccessor' 字 符 串 是 因为 
它 看 起 来 更 能 表达 我 们 的 目的 ， 代 码 如 下 : 


Function.prototype.after = function( fn ){ 
var self = this; 
return function(){ 
var ret = self.apply( this, arguments ); 
if ( ret === 'nextSuccessor' ){ 
return fn.apply( this, arguments ); 
} 


return ret; 


} 
Bs 


Var order = order500yuan.after( order200yuan ).after( orderNormal ); 


order( 1, true, 500 ); // 输出 : 500 元 定金 预购 ， 得 到 100 优惠 券 

order( 2, true, 500 ); // 输出 : 200 元 定金 预购 ， 得 到 50 优惠 券 

order( 1，false，500 ); // 输出 : 普通 购买 ， 无 优惠 券 

用 AOP 来 实现 职责 链 既 简单 又 巧妙 ， 但 这 种 把 函数 到 在 一 起 的 方式 ， 同 时 也 老 加 了 函数 的 
作用 域 ， 如 果 链 条 太 长 的 话 ， 也 会 对 性 和 E 有 较 大 的 影响 。 


13.8 用 职责 链 模式 获取 文件 上 传 对 象 


在 第 7 章 有 一 个 用 迭代 器 获取 文件 上 传 对象 的 例子 : 当时 我 们 创建 了 一 个 迭代 器 来 迭代 获取 
合适 的 文件 上 传 对 象 ， 其 实用 职责 链 模式 可 以 更 简单 ,我们 完全 不 用 创建 这 个 多 余 的 授 代 器 ， 完 
整 代码 如 下 : 


var getActiveUpload0bj = function(){ 
try{ 
return new ActiveXObject("TXFTNActiveX.FTNUpload"); // IE 上 传 控件 
}catch(e){ 
return 'nextSuccessor' ;} 
} 


}; 


var getFlashUpload0bj = function(){ 
if ( supportFlash() ){ 
var str = "<object type="application/x-shockwave-flash"></object>'; 
return $( str ).appendTo( $('body') ); 


} 


return 'nextSuccessor' ; 


}; 
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var getFormUpladobj = function(){ 


return $( '<form><input name="file" type="file"/></form>' ).appendTo( $('body') ); 


中 


var getUpload0bj = getActiveUp1load0bj.after( getFlashUpload0bj ).after( getFormUplad0bj ); 


console.log( getUpload0bj() ); 


13.9 小结 


在 JavaScript 开 发 中 ， 职 责 链 模式 是 最 容易 被 忽视 的 模式 之 一 。 实 际 上 只 要 运用 得 当 ， 职 责 


链 模式 可 以 很 好 地 帮助 我 们 管理 代码 ,降低 发 起 请 求 的 对 象 和 处 理 请 求 的 对 象 之 间 
责 链 中 的 节点 数量 和 顺序 是 可 以 自由 变化 的 ， 我 们 可 以 在 运行 时 决定 链 中 包含 哪些 节 


无 论 是 作用 域 链 、 原 型 链 ， 还 是 DOM 节点 中 的 事件 冒 泡 ， 我 们 都 能 从 中 找到 职 


影子 。 职 责 链 模 式 还 可 以 和 组 合 模 式 结合 在 一 起 ， 用 来 连接 部 件 和 父 部 件 , 或 是 
效率 。 学 会 使 用 职责 链 模式 ， 相 信 在 以 后 的 代码 编写 中 ， 将 会 对 你 大 有 神 益 。 
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me 


2 


只 责 链 模式 的 
组 合 对 象 的 


第 14 草 


中 介 者 模式 


在 我 们 生活 的 世界 中 , 每 个 人 每 个 物体 之 间 都 会 产生 一 些 错 综 复 杂 的 联系 。 在 应 用 程序 里 也 
是 一 样 ， 程 序 由 大 大 小 小 的 单一 对 象 组 成 ， 所 有 这 些 对 象 都 按照 某 种 关系 和 规则 来 通信 。 

平时 我 们 大 概 能 记 住 10 个 朋友 的 电话 、30 家 和 餐馆 的 位 置 。 在 程序 里 ， 也 许 一 个 对 象 会 和 其 
他 10 个 对 象 打交道 ， 所 以 它 会 保持 10 个 对 象 的 引用 。 当 程序 的 规模 增 大 ， 对 象 会 越 来 越 多 ， 它 
们 之 间 的 关系 也 越 来 越 复杂 ,难免 会 形成 网 状 的 交叉 引用 。 当 我 们 改变 或 删除 其 中 一 个 对 象 的 时 
候 ， 很 可 能 需要 通知 所 有 引用 到 它 的 对 象 。 这 样 一 来 ， 就 像 在 心脏 劳 边 拆 掉 一 根 毛细 血管 一 般 ， 
即使 一 点 很 小 的 修改 也 必须 小 心 辟 愤 ， 如 图 14-1 所 示 。 


图 14-1 
面向 对 象 设计 鼓励 将 行为 分 布 到 各 个 对 象 中 , 把 对 象 划 分 成 更 小 的 粒度 ,， 有 助 于 增强 对 象 的 
可 复 用 性 , 但 由 于 这 些 细 粒 度 对 象 之 间 的 联系 激增 ,又 有 可 能 会 反 过 来 降低 它们 的 可 复 用 性 。 
中 介 者 模式 的 作用 就 是 解除 对 象 与 对 象 之 间 的 紧 耦 合 关 系 。 增 加 一 个 中 介 者 对 象 后 , 所 有 的 
相关 对 象 都 通过 中 介 者 对 象 来 通信 ， 而 不 是 互相 引用 ， 所 以 当 一 个 对 象 发 生 改 变 时 ， 只 需要 通知 
中 介 者 对 象 即 可 。 中 介 者 使 各 对 象 之 间 耦 合 松 散 ， 而 且 可 以 独立 地 改变 它们 之 间 的 交互 。 中 介 者 
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模式 使 网 状 的 多 对 多 关系 变 成 了 相对 简单 的 一 对 多 关系 ， 如 图 14-2 所 示 。 


图 14-2 


在 图 14-1 中 ， 如 果 对 象 A 发 生 了 改变 ， 则 需要 同时 通知 跟 A 发 生 引 用 关系 的 B、D、E、F 
这 4 个 对 象 ; 而 在 图 14-2 中 , 使 用 中 介 者 模式 改进 之 后 , A 发 生 改 变 时 则 只 需要 通知 这 个 中 介 者 
对 象 即 可 。 


14.1 现实 中 的 中 介 者 


在 现实 生活 中 也 有 很 多 中 介 者 的 例子 ， 下 面 列 举 几 个 。 

1. 机 场 指挥 塔 

中 介 者 也 被 称 为 调停 者 ,我们 想象 一 下 机 场 的 指挥 塔 ， 如 果 没 有 指挥 塔 的 存在 , 每 一 架 飞 机 
要 和 方圆 100 公里 内 的 所 有 飞机 通信 ,才能 确定 航线 以 及 飞行 状况 , 后 果 是 不 可 想象 的 。 现 实 中 
的 情况 是 ， 每 架 飞 机 都 只 需要 和 指挥 塔 通信 。 指 挥 塔 作为 调停 者 ， 知 道 每 一 架 飞 机 的 飞行 状况 ， 
所 以 它 可 以 安排 所 有 飞机 的 起 降 时 间 ， 及 时 做 出 航线 调整 。 
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2. 博彩 公司 

打 麻 将 的 人 经 常 遇 到 这 样 的 问题 ， 打 了 几 局 之 后 开始 计算 钱 ，A 自摸 了 两 把 ，B 杠 了 三 次 ， 
C 点 炮 一 次 给 D， 谁 应 该 给 谁 多 少 钱 已 经 很 难 计算 清 楚 ， 而 这 还 是 在 只 有 4 个 人 参与 的 情况 下 。 

在 世界 杯 期 间 购买 足球 彩票 , 如 果 没 有 博彩 公司 作为 中 介 , 上 千 万 的 人 一 起 计算 赔 率 和 输赢 
绝对 是 不 可 能 实现 的 事情 。 有 了 博彩 公司 作为 中 介 , 每 个 人 只 需 和 博彩 公司 发 生 关联 ,博彩 公司 
会 根据 所 有 人 的 投注 情况 计算 好 赔 率 ， 彩 民 们 赢 了 钱 就 从 博彩 公司 拿 ， 输 了 了 钱 就 交 给 博彩 公司 。 
14.2 ”中 介 者 模式 的 例子 一 一 泡 泡 堂 游戏 

大 家 可 能 都 还 记得 泡 泡 符 游戏 ， 我 曾经 写 过 一 个 JS 版 的 泡 泡 堂 ， 现 在 我 们 来 一 起 回顾 这 个 
游戏 ， 在 游戏 之 初 只 支持 两 个 玩家 同时 进行 对 战 。 

先 定义 一 个 玩家 构造 函数 , 它 有 3 个 简单 的 原型 方法 : Play.prototype.win、Play.prototype.lose 
以 及 表示 玩家 死亡 的 Play.prototype.die。 

因为 玩家 的 数目 是 2， 所 以 当 其 中 一 个 玩家 死亡 的 时 候 游 戏 便 结束 , 同时 通知 它 的 对 手 胜利 。 
这 段 代码 看 起 来 很 简单 : 


function Player( name ){ 
this.name = name 
this.enemy = null; // 敌人 
}; 


Player.prototype.win = function(){ 
console.log( this.name + ' won ' ); 


}; 


Player.prototype.lose = function(){ 
console.log( this.name +' lost' ); 


}; 


player.prototype.die = function(){ 
this. lose(); 
this.enemy.win(); 


}; 
接 下 来 创建 2 个 玩家 对 象 : 


var player1 
var player2 


给 玩家 相互 设置 敌人 : 


player1.enemy = player2; 
player2.enemy = player1; 


new Player( “皮蛋 ' ); 
new Player( “小冬 ' ); 
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当 玩 家 playerl 被 泡 泡 炸 死 的 时 候 ， 只 需要 调用 这 一 句 代 码 便 完成 了 一 局 游戏 : 
player1.die();// 输出 : 皮蛋 lost、 人 小冬 won 


我 曾 用 这 个 游戏 自 娱 自 乐 了 一 阵子 , 但 不 久 过 后 就 觉得 只 有 2 个 玩家 其 实 没什么 意思 , 真正 
的 泡 泡 符 游戏 至 多 可 以 有 8 个 玩家 ， 并 分 成 红 蓝 两 队 进行 游戏 。 


14.2.1 为 游戏 增加 队伍 
现在 我 们 改进 一 下 游戏 。 因 为 玩家 数量 变 多 ， 用 下 面 的 方式 来 设置 队友 和 敌人 无 疑 很 低 效 : 


player1.partners= [player1,player2,player3,player4]; 
player1.enemies = [player5,player6,player7,player8]; 


Player5.partners= [player5,player6,player7,player8]; 
Player5.enemies = [player1,player2,player3,player4]; 


所 以 我 们 定义 一 个 数组 players 来 保存 所 有 的 玩家 ， 在 创建 玩家 之 后 ， 循 环 players 来 给 每 
个 玩家 设置 队友 和 敌人 : 


var players = []; 


再 改写 构造 函数 Player， 使 每 个 玩家 对 和 象 都 增加 一 些 属性 ,分 别 是 队友 列表 、 敌 人 列表 、 
玩家 当前 状态 、 角 色 名 字 以 及 玩家 所 在 的 队伍 颜色 : 


function Player( name, teamColor ){ 
this.partners = []; // 队友 列表 
this.enemies = []; // 敌人 列表 
this.state = 'live'; // 玩家 状态 
this.name = name; // 角色 名 字 
this.teamColor = teamColor; // 队伍 颜色 


}; 
玩家 胜利 和 失败 之 后 的 展现 依然 很 简单 ， 只 是 在 每 个 玩家 的 屏幕 上 简单 地 弹出 提示 : 
Player.prototype.win = function(){  // 玩家 团队 胜利 


console.log( 'winner: ' + this.name ); 
}; 


Player.prototype.lose = function(){  // 玩家 团队 失败 
console.log( 'loser: ' + this.name ); 


及 


玩家 死亡 的 方法 要 变 得 稍微 复杂 一 点 ， 我 们 需要 在 每 个 玩家 死亡 的 时 候 ， 都 遍历 其 他 队友 
的 生存 状况 ， 如 果 队 友 全 部 死亡 ， 则 这 局 游戏 失败 ， 同 时 敌人 队伍 的 所 有 玩家 都 取得 胜利 ， 代 
但 如 下 : 


Player.prototype.die = function(){  // 玩家 死亡 


var all dead = true; 
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this.state = 


for ( var i 


if ( partner.state !== 'dead' ){ 
all dead = false; 
break; 


} 


if ( all dead 
this.1lose(); 


'dead'; 


= 0, partner; partner = 


true ){ 


partner. lo0se(); 


} 


for ( var i = 


enemy.win(); 


} 
和 


0, enemy; enemy = 


// 设置 玩家 状态 为 死亡 


this.partners[ i++ ]; ){ // 遍历 队友 列表 
// 如 果 还 有 一 个 队友 没有 死亡 ， 则 游戏 还 未 失败 


// 如 果 队友 全 部 死亡 
// 通知 自己 游戏 失败 
for ( var i = 0, partner; partner = 


this.partners[ i++ ]; ){ // 通知 所 有 队友 玩家 游戏 失败 


this.enemies[ i++ ]; ){ // 通知 所 有 敌人 游戏 胜利 


最 后 定义 一 个 工厂 来 创建 玩家 


var playerFactory = 
var newPlayer = 


function( name, teamColor ){ 
new Player( name, teamColor ); 


// 创建 新 玩家 


for ( var i = 0, player; player = 
if ( player.teamColor 
player.partners.push( newPlayer ); 
newPlayer.partners.push( player ); 

}else{ 
player.enemies.push( newPlayer ); 
newPlayer.enemies.push( player ); 


players[ i++ ]; 
newPlayer.teamColor ){ 


// 通知 所 有 的 玩家 ， 有 新 角色 加 入 
// 如 果 是 同一 队 的 玩家 
// 相互 添加 到 队友 列表 


){ 


// 相互 添加 到 敌人 列表 


} 
} 


players.push( newPlayer ); 


return newPplayer; 


}; 
现在 来 感受 一 下 , 用 这 段 代 码 创建 8 个 玩家 
// 红 队 : 
var player1 = playerFactory( “皮蛋 '，'Ted' )， 
player2 = playerFactory(“ 小 冬 '，'ired' )， 
player3 = playerFactory(“' 宝 宝 '，'red' )， 
player4 = playerFactory(' 小 强 '"，'red' ); 
// 蓝 队 : 
var player5 = playerFactory( “ 黑 妞 "，'blue”)， 
player6 = playeiFactory(“ 营 头 "， "blue' )， 
player7 = playerFactory(“' 胖 墩 '，'blue' )， 
player8 = playerFactory( ' 海 盗 '"，'blue' ); 
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让 红 队 玩家 全 部 死亡 : 


player1.die(); 
player2.die(); 
player4.die(); 
player3.die(); 


程序 执行 结果 如 图 14-3 所 示 。 


Q DD Eements Network Sources Timeline Profiles Resources Audits |‘Gonsole 


14.2.2 ”玩家 增多 带 来 的 困扰 


现在 我 们 已 经 可 以 随意 地 为 游戏 增加 玩家 或 者 队伍 , 但 问题 是 , 每 个 玩家 和 其 他 玩家 都 是 紧 
紧 耦 合 在 一 起 的 。 在 此 段 代码 中 ， 每 个 玩家 对 象 都 有 两 个 属性 ，this.partners 和 this.enemies， 
用 来 保存 其 他 玩家 对 象 的 引用 。 当 每 个 对 象 的 状态 发 生 改变 ， 比 如 角色 移动 、 吃 到 道具 或 者 死亡 
时 ， 都 必须 要 显 式 地 遍历 通知 其 他 对 象 。 

在 这 个 例子 中 只 创建 了 8 个 玩家 , 或 许 还 没有 对 你 产生 足够 多 的 困扰 ， 而 如 果 在 一 个 大 型 网 
络 游戏 中 ,画面 里 有 成 百 上 千 个 玩家 ， 几 十 文 队伍 在 互相 叫 杀 。 如 果 有 一 个 玩家 掉 线 ， 必 须 从 所 
有 其 他 玩家 的 队友 列表 和 敌人 列表 中 都 移 除 这 个 玩家 ,游戏 也 许 还 有 解除 队伍 和 添加 到 别 的 队伍 
的 功能 , 红色 玩家 可 以 突然 变 成 蓝 色 玩家 ,这 就 不 再 仅仅 是 循环 能 够 解决 的 问题 了 。 面 对 这 样 的 
需求 ， 我 们 上 面 的 代码 可 以 迅速 进入 投降 模式 。 


14.2.3 ”用 中 介 者 模式 改造 泡 泡 堂 游戏 


现在 我 们 开始 用 中 介 者 模式 来 改造 上 面 的 泡 泡 堂 游戏 ， 改造 后 的 玩家 对 象 和 中 介 者 的 关系 
如 图 14-4 所 示 。 
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图 14-4 


首先 仍然 是 定义 Player 构造 浮 数 和 player 对 象 的 原型 方法 ， 在 player 对 象 的 这 些 原 型 方法 
中 ,不 再 负责 具体 的 执行 逻辑 ， 而 是 把 操作 转交 给 中 介 者 对 象 ， 我 们 把 中 介 者 对 象 命名 为 


playerDirector: 


function Player( name, teamColor ){ 
this.name = name; // 角色 名 字 
this.teamColor = teamColor; // 队伍 颜色 
this.state = 'alive';  // 玩家 生存 状态 
}; 


Player.prototype.win = function(){ 
console.log( this.name + ' won ' ); 
}; 


Player.prototype.lose = function(){ 
console.log( this.name +' lost' ); 


> 


Player.prototype.die = function(){ 
this.state = 'dead'; 
playerDirector.reciveMessage( 'playerDead'，this ); // 给 中 介 者 发 送 消息 ， 玩 家 死亡 


】 
Player.prototype.remove = function(){ 


playerDirector.reciveMessage( 'removePlayer', this ); // 给 中 介 者 发 送 消息 ， 移 除 一 个 玩家 


入 
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玩家 


player.prototype.changeTeam = function( color ){ 
playerDirector.reciveMessage( 'changeTeam'，this，color );  // 给 中 介 者 发 送 消息 ， 玩 家 换 队 


再 继续 改写 之 前 创建 玩家 对 象 的 工厂 函数 , 可 以 看 到 , 因为 工厂 函数 里 不 再 需要 给 创建 的 玩 
家 对 象 设置 队友 和 敌人 ， 这 个 工厂 函数 几乎 失去 了 工厂 的 意义 : 
var playerFactory = function( name, teamColor ){ 


var newPlayer = new Player( name, teamColor ); // 创造 一 个 新 的 玩家 对 象 
playerDirector.reciveMessage( 'addPlayer'，newPlayer );  // 给 中 介 者 发 送 消息 ， 新 增 玩家 


return newplayer; 


}; 

最 后 ， 我 们 需要 实现 这 个 中 介 者 playerDirector 对 象 ， 一 般 有 以 下 两 种 方式 。 

口 利用 发 布 -订阅 模式 。 将 playerDirector 实现 为 订阅 者 , 各 player 作为 发 布 者 , 一 旦 player 
的 状态 发 生 改 变 ， 便 推送 消息 给 playerDirector，playerDirector 处 理 消息 后 将 反馈 发 送 
给 其 他 player。 

口 在 playerDirector 中 开放 一 些 接收 消息 的 接口 ， 各 player 可 以 直接 调用 该 接口 来 给 
playerDirector 发 送 消息 ，player 只 需 传递 一 个 参数 给 playerDirector ， 这 个 参数 的 目的 

是 使 playerDirector 可 以 识别 发 送 者 。 同 样 ，playerDirector 接收 到 消息 之 后 会 将 处 理 结 

果 反 馈 给 其 他 player。 
这 两 种 方式 的 实现 没什么 本 质 上 的 区 别 。 在 这 里 我 们 使 用 第 二 种 方式 ，playerDirector 开放 

一 个 对 外 暴露 的 接口 reciveMessage， 人 负责 接收 player 对 象 发 送 的 消息 ， 而 player 对 象 发 送 消息 

的 时 候 ， 总 是 把 自身 this 作为 参数 发 送 给 playerDirector， 以 便 playerDirector 识别 消息 来 自 于 

哪个 玩家 对 象 ， 代 码 如 下 : 

var playerDirector= ( function(){ 


Var players = {}， // 保存 所 有 玩家 
operations = {};  // 中 介 者 可 以 执行 的 操作 


operations.addPlayer = function( player ){ 
var teamColor = player.teamColor;  // 玩家 的 队伍 颜色 
players[ teamColor ] = players[ teamColor ] || []; // 如 果 该 颜色 的 玩家 还 没有 成 立 队伍 ， 则 
新 成 立 一 个 队伍 
players[ teamColor ].push( player );  // 添加 玩家 进 队 伍 
operations.removePplayer = function( player ){ 
Var teamColor = player.teamColor， // 玩家 的 队伍 颜色 
teamPlayers = players[ teamColor ] || [];  // 该 队伍 所 有 成 员 
for ( var i = teamplayers.length - 1; i >= 0; i-- ){  // 遍历 删除 
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if ( teamplayers[ i ] === player ){ 
teamplayers.splice( i, 1 ); 
} 


} 
}; 


operations.changeTeam = function( player,， newTeamColor ){  // 玩家 换 队 
operations.removePlayer( player ); // 从 原 队伍 中 删除 
player.teamColor = newTeamColor;  // 改变 队伍 颜色 


operations.addPlayer( player ); // 增加 到 新 队伍 中 
}; 
operations.playerDead = function( player ){ // 玩家 死亡 
var teamColor = player.teamColor, 
teamplayers = players[ teamColor ];  // 玩家 所 在 队伍 
var all dead = true; 
for ( var i = 0, player; player = teamplayers[ i++ ]; ){ 
if ( player.state !== 'dead' ){ 
all dead = false; 
break; 
} 
} 
if ( all dead === true ){  // 全 部 死亡 
for ( var i = 0, player; player = teamplayers[ i++ ]; ){ 
player.lose(); // 本 队 所 有 玩家 lose 
} 
for ( var color in players ){ 
if ( color !== teamColor ){ 
Var teampPlayers = players[ color ];  // 其 他 队伍 的 玩家 
for ( var i = 0, player; player = teamplayers[ i++ ]; ){ 
player.win();  // 其 他 队伍 所 有 玩家 Win 
} 
} 
} 
} 
}; 


var reciveMessage = function(){ 
var message = Array.prototype.shift.call( arguments );  // arguments 的 第 一 个 参数 为 消息 名 称 
operations[ message ].apply( this, arguments ); 


}; 
return { 
reciveMessage: reciveMessage 
} 
DO; 
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可 以 看 到 , 除了 中 介 者 本 身 , 没有 一 个 玩家 知道 其 他 任何 玩家 的 存在 , 玩家 与 玩家 之 间 的 灯 


合 关 系 已 经 完全 解除 , 某 个 玩家 的 任何 操作 都 不 需要 通知 其 他 玩家 , 而 只 需要 给 中 介 者 发 送 一 个 


消息 , 中 介 者 处 理 完 消息 之 后 会 把 处 理 结果 反馈 


展 更 多 功能 ， 以 适应 游戏 需求 的 不 断 变化 。 


我 们 来 看 下 测试 结果 : 


// 红 队 : 

var player1 = playerFactory( 
player2 = playerFactory( 
player3 = playerFactory( 
player4 = playerFactory( 

// 蓝 队 : 

var player5 = playerFactory( 
player6 = playerFactory( 
player7 = playerFactory( 
player8 = playerFactory( 


player1.die(); 
player2.die(); 
player3.die(); 
player4.die(); 


运行 结果 如 图 14-5 所 示 。 


Q DH Eements Network Sources 
© 守 top frame> 


' 皮 蛋 '， 
小 乖 '， 
' 宝 宝 ! 

二 


"小 强 '， 
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' 营 头 '， 
' 胖 墩 '， 


1 万 次 1! 
租 丛 ， 


图 


给 其 


一 


14-5 


假设 皮 重 和 小 乖 掉 线 ， 则 结果 如 图 14-6 所 示 。 


player1.remove(); 
player2.remove(); 
player3.die(); 
player4.die(); 
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假设 皮蛋 从 红 队 叛变 到 蓝 队 ， 则 结果 如 图 14-7 所 示 。 


player1.changeTeam( 'blue' ); 
player2.die(); 
player3.die(); 
player4.die(); 


Q 日 Elements Network Sources Timeline Profiles Resources Audits |'Console| 


网 14-7 


14.3 ”中 介 者 模式 的 例子 一 一 购买 商品 


假设 我 们 正在 编写 一 个 手机 购买 的 页 面 , 在 购买 流程 中 , 可 以 选择 手机 的 颜色 以 及 输入 购买 
数量 , 同时 页 面 中 有 两 个 展示 区 域 , 分 别 向 用 户 展示 刚刚 选择 好 的 颜色 和 数量 。 还 有 一 个 按钮 动 
态 显 示 下 一 步 的 操作 ,我 们 需要 查询 该 颜色 手机 对 应 的 库存 , 如 果 库 存 数量 少 于 这 次 的 购买 数量 ， 
按钮 将 被 禁用 并 且 显 示 库 存 不 足 ， 反 之 按钮 可 以 点 击 并 且 显 示 放 入 购物 车 。 

这 个 需求 是 非常 容易 实现 的 ， 假 设 我 们 已 经 提前 从 后 台 获取 到 了 所 有 颜色 手机 的 库存 量 : 

var goods = {  // 手机 库存 


"red": 3， 
"blue": 6 


}; 
那么 页 面 有 可 能 显示 为 如 下 几 种 场景 : 
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选择 红色 手机 ， 购 买 4 个 ， 库 存 不 足 。 如 图 14-8 所 示 。 


图 14-8 


选择 蓝 色 手机 ， 购 买 5 个， 库存 充足 ， 可 以 加 入 购物 车 。 如 图 14-9 所 示 。 


图 14-9 


或 者 是 没有 输入 购买 数量 的 时 候 ， 按 钮 将 被 禁用 并 显示 相应 提示 。 如 图 14-10 所 示 。 


图 14-10 
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我 们 大 概 已 经 能 够 猜 到 ， 接 下 来 将 遇 到 至 少 $ 个 节点 ， 分 别 是 : 
口 下 拉 选 择 框 colorSelect 

口 文本 输入 框 numberInput 

口 展示 颜色 信息 colorInfo 

口 展示 购买 数量 信息 numberInfo 


口 决定 下 一 步 操 作 的 按钮 nextBtn 


14.3.1 开始 编写 代码 
我 们 从 编写 HTML 代码 开始 。 


<body> 
选择 颜色 : <select id="colorSelect"> 
<option value=""> 请 选择 </optiony> 
<option value="red"> 红 色 </option> 
<option value="blue"> 蓝 色 </option> 
</select> 


输入 购买 数量 : 《input type="text" id="numberInput"/> 


您 选择 了 颜色 : <div id="colorInfo"></div><br/> 
您 输入 了 数量 : 《div id="numberInfo"></div><br/> 


<button id="nextBtn" disabled="true"> 请 选择 手机 颜色 和 购买 数量 </button> 
</body> 


接 下 来 将 分 别 监听 colorSelect 的 onchange 
后 在 这 两 个 事件 中 作出 相应 处 理 。 


<script> 
var colorSelect = document.getElementById( 'colorSelect' ), 
numberInput = document.getElementById( 'numberInput' ), 
colorInfo = document.getElementById( 'colorInfo' ), 
numberInfo = document.getElementById( “numberInfo”)， 
nextBtn = document.getElementById( 'nextBtn' ); 


hl 


有 件 函 数 和 numberInput 的 oninput 事件 函数 ， 然 


var goods = {  // 手机 库存 
"red": 3， 
"blue": 6 

}; 


colorSelect.onchange = function(){ 
var color = this.value， // 颜色 
number = numberInput.value， // 数量 
stock = goods[ color ];  // 该 颜色 手机 对 应 的 当前 库存 


colorInfo.innerHTML = color; 
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if ( lcolor ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML = “请 选择 手机 颜色 ' ; 
return; 


} 


if (((numer-0)|0)!==number -0){f // 用 户 输入 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 请 输入 正确 的 购买 数量 '; 
return; 


} 


if ( number > stock ){  // 当前 选择 数量 没有 超过 库存 量 
nextBtn.disabled = true; 
nextBtn.innerHTML = “库存 不 足 '; 
return ; 


} 


nextBtn.disabled = false; 
nextBtn.innerHTML = ' 放 入 购物 车 '; 


下 


</script> 


14.3.2 ”对 象 之 间 的 联系 


的 购买 数量 是 否 为 正 整 数 


来 考虑 一 下 ， 当 触发 了 colorSelect 的 onchange 之 后 ,会 发 生 什么 事情 。 


首先 我 们 要 让 colorInfo 中 显示 当前 选中 的 颜色 ， 然 后 获取 用 户 当 前 输入 的 购买 数量 ， 对 用 
户 的 输入 值 进 行 一 些 合法 性 判断 。 再 根据 库存 数量 来 判断 nextBtn 的 显示 状态 。 


别 忘 了 ， 我 们 还 要 编写 numberInput 的 事件 相关 代码 : 


numberInput.oninput = function(){ 
var color = colorSelect.value， // 颜色 
number = this.value， // 数量 
stock = goods[ color ]; // 该 颜色 手机 对 应 的 当前 库存 


numberInfo.innerHTIML = number; 


if ( !color ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML =“ 请 选择 手机 颜色 '; 
return; 


} 


if (((numer-0)|0)!==number -0){ /输入 购买 数量 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 请 输入 正确 的 购买 数量 '; 
return; 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


是 否 为 正 整数 


14.3 ”中 介 者 模式 的 例子 


购买 商品 203 


if ( number > stock ){  // 当前 选择 数量 没有 超过 库存 量 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 库 存 不 足 '; 
return ; 


} 


nextBtn.disabled = false; 
nextBtn.innerHTML = ' 放 入 购物 车 '; 


}; 


14.3.3 ”可 能 遇 到 的 困难 

虽然 目前 顺利 完成 了 代码 编写 , 但 随 之 而 来 的 需求 改变 有 可 能 给 我 们 带 来 麻烦 。 假 设 现在 要 
求 去 掉 colorInfo 和 numberInfo 这 两 个 展示 区 域 ， 我 们 就 要 分 别 改动 colorSelect.onchange 和 
numberInput .onput 里 面 的 代码 ， 因 为 在 先前 的 代码 中 ， 这 些 对 象 确实 是 耦合 在 一 起 的 。 

目前 我 们 面临 的 对 象 还 不 算 太 多 ， 当 这 个 页 面 里 的 节点 激增 到 10 个 或 者 15 个 时 , 它们 之 间 
的 联系 可 能 变 得 更 加 错综复杂 , 任何 一 次 改动 都 将 变 得 很 埋 手 。 为 了 证 实 这 一 点 ,我 们 假设 页 面 
中 将 新 增 另 外 一 个 下 拉 选 择 框 ， 代 表 选 择 手 机 内 存 。 现 在 我 们 需要 计算 颜色 、 内 存 和 购买 数量 ， 
来 判断 nextBtn 是 显示 库存 不 足 还 是 放 入 购物 车 。 

首先 我 们 要 增加 两 个 HTML 节点 : 


<body> 


选择 颜色 : <select id="colorSelect"> 
<option value=""> 请 选择 </option> 
<option value="red"> 红 色 </option> 
<option value="blue"> 蓝 色 </option> 
</select> 


选择 内 存 : <select id="memorySelect"> 
<option value=""> 请 选择 </option> 
<option value="32G">32G</option> 
<option value="16G">16G</option> 
</select> 


输入 购买 数量 : 《input type="text" id="numberInput"/><br/> 
您 选择 了 颜色 : 《div id="colorInfo"></div><br/> 
您 选择 了 内 存 : 《div id="memoryInfo"></div><br/> 


您 输入 了 数量 : 《div id="numberInfo"></div><br/> 


<button id="nextBtn"” disabled="true"> 请 选择 手机 颜色 和 购买 数量 /button> 
</body> 


<script> 
var colorSelect = document.getElementById( 'colorSelect' ), 
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numberInput = document.getElementById( 'numberInput' ), 
memorySelect = document.getElementById( “memorySelect”)， 
colorInfo = document.getElementById( 'colorInfo' ), 
numberInfo = document.getElementById( “numberInfo”)， 
memoryInfo = document.getElementById( 'memoryInfo' ), 
nextBtn = document.getElementById( 'nextBtn' ); 


</script> 


接 下 来 修改 表示 存 库 的 JSON 对 象 以 及 修改 colorSelect 的 onchange 事件 函数 : 


<script> 
var goods = {  // 手机 库存 


下 


"red|32G": 3， // 红色 326， 库 存 数量 为 3 
"red|16G": 0， 

"blue|320": 1， 

"blue|16G": 6 


colorSelect.onchange = function(){ 


le 


var color = this.value, 
memory = memorySelect.value, 
stock = goods[ color + '|' + memory ]; 


number = numberInput.value， // 数量 
colorInfo.innerHIML = color; 


if ( lcolor ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML = “请 选择 手机 颜色 ' ; 
return; 


} 

if ( !memory ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 请 选择 内 存 大 小 '; 
return; 


} 

if (((numer-0)|0)!==number -0 ){ // 输入 购买 数量 是 否 为 正 整 数 
nextBtn.disabled = true; 
nextBtn.innerHTML =“ 请 输入 正确 的 购买 数量 ' ; 
return; 

} 

if ( number > stock ){  // 当前 选择 数量 没有 超过 库存 量 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 库 存 不 足 '; 
return ; 

} 

nextBtn.disabled = false; 

nextBtn.innerHTML = ' 放 入 购物 车 '; 


</script> 


当然 我 们 同样 要 改写 numberInput 的 事件 相关 代码 ,具体 代码 的 改变 跟 colorselect 大 同 小 异 ， 


读者 可 以 自行 实现 。 
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最 后 还 要 新 增 memorySelect 的 onchange 事件 函数 : 


《SCITipt> 
memorySelect.onchange = function(){ 


Var color = colorSelect.value， // 颜色 
number = numberInput.value， // 数量 
memory = this.value, 
stock = goods[ color + '|' + memory ];  // 该 颜色 手机 对 应 的 当前 库存 
memoryInfo.innerHTML = memory; 


if ( !color ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML =“ 请 选择 手机 颜色 ' ; 
return; 


} 

if ( !memory ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 请 选择 内 存 大 小 '; 
return; 


} 

if (((numer-0)|0)!==number -0){ // 输入 购买 数量 是 否 为 正 整 数 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 请 输入 正确 的 购买 数量 '; 
return; 


} 

if ( number > stock ){  // 当前 选择 数量 没有 超过 库存 量 
nextBtn.disabled = true; 
nextBtn.innerHTML =“ 库 存 不 足 '; 
return ; 


} 


nextBtn.disabled = false; 
nextBtn.innerHTML = ' 放 入 购物 车 '; 


}; 
</script> 
很 遗憾 ,我 们 仅仅 是 增加 一 个 内 存 的 选择 条 件 ,就 要 改变 如 此 多 的 代码 , 这 是 因为 在 目前 的 
实现 中 ,每 个 节点 对 象 都 是 耦合 在 一 起 的 ,改变 或 者 增加 任何 一 个 节点 对 象 , 都 要 通知 到 与 其 相 
关 的 对 象 。 


14.3.4 引入 中 介 者 


现在 我 们 来 引入 中 介 者 对 象 ， 所 有 的 节点 对 象 只 跟 中 介 者 通信 。 当 下 拉 选 择 框 colorSelect、 
memorySelect 和 文本 输入 框 numberInput 发 生 了 事件 行为 时 ， 它 们 仅仅 通知 中 介 者 它们 被 改变 了 ， 
同时 把 自身 当 作 参 数 传 人 中 介 者 ,以 便 中 介 者 辨别 是 谁 发 生 了 改变 。 剩 下 的 所 有 事情 都 交 给 中 介 
者 对 象 来 完成 ， 这 样 一 来 ， 无 论 是 修改 还 是 新 增 节 点 ， 都 只 需要 改动 中 介 者 对 象 里 的 代码 。 
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var goods = {  // 手机 库存 
"red|320": 3， 
"red|16G": 0， 
"blue|32G": 1， 
"blue|16G": 6 
}; 
var mediator = (function(){ 


var colorSelect = document.getElementById( 'colorSelect' ), 
memorySelect = document.getElementById( “memorySelect”)， 
numberInput = document.getElementById( 'numberInput' ), 
colorInfo = document.getElementById( 'colorInfo' ), 
memoryInfo = document.getElementById( 'memoryInfo' ), 
numberInfo = document.getElementById( “numberInfo”)， 
nextBtn = document.getElementById( 'nextBtn' ); 


return { 
changed: function( obj ){ 
Var color = colorSelect.value， // 颜色 
memory = memorySelect.value,// 内 存 
number = numberInput.value， // 数量 
stock = goods[ color + '|' + memory ]; // 颜色 和 内 存 对 应 的 手机 库存 数量 


if ( obj === colorSelect ){ // 如 果 改 变 的 是 选择 颜色 下 拉 框 
colorInfo.innerHTML = color; 

}else if ( obj === memorySelect ){ 
memoryInfo.innerHTML = memory; 

}else if ( obj === numberInput ){ 
numberInfo.innerHTML = number; 


} 


if ( lcolor ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML =“ 请 选择 手机 颜色 ' ; 
return; 


} 


if ( !memory ){ 
nextBtn.disabled = true; 
nextBtn.innerHTML = ' 请 选择 内 存 大 小 '; 
return; 


} 


if(((number -0)|10) 4!== number -0){ /输入 购买 数量 是 否 为 正 整数 
nextBtn.disabled = true; 
nextBtn.innerHTML =“ 请 输入 正确 的 购买 数量 ' ; 
return; 


} 


nextBtn.disabled = false; 
nextBtn.innerHTML = ' 放 入 购物 车 '; 
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DO; 


// 事件 函数 : 
colorSelect.onchange = function(){ 
mediator.changed( this ); 

}; 
memorySelect.onchange = function(){ 
mediator.changed( this ); 


numberInput.oninput = function(){ 
mediator.changed( this ); 


}; 


可 以 想象 ， 某 天 我 们 又 要 新 增 一 些 跟 需求 相关 的 节点 ， 比 如 CPU 型 号 ， 那 我 们 只 需要 稍稍 
改动 mediator 对 象 即 可 : 


var goods = {  ”// 手机 库存 
"red|32G|800": 3， // 颜色 red， 内存 326，cpu800， 对 应 库存 数量 为 3 
"red|16G|801": 0， 
"blue|32G|800": 1， 
"blue|16G|801": 6 


}; 


var mediator = (function(){ 
// 略 
var cpuSelect = document.getElementById( 'cpusSelect' ); 


return { 
change: function(obj){ 
// 略 
var cpu = cpuSelect.value, 
stock = goods[ color + “| + memory + '|'" + cpu ]; 


if ( obj === cpuSelect ){ 
cpuInfo.innerHTML = cpu; 
} 


// 略 


DO; 


14.4 ”小 结 


中 介 者 模式 是 迎合 迪 米 特 法 则 的 一 种 实现 。 迪 米 特 法 则 也 叫 最 少 知识 原则 ,是 指 一 个 对 象 应 
该 尽 可 能 少 地 了 解 另 外 的 对 象 〈 类 似 不 和 陌生 人 说 话 )。 如 果 对 象 之 间 的 耦合 性 太 高 ， 一 个 对 象 
发 生 改 变 之 后 ， 难 免 会 影响 到 其 他 的 对 象 , 跟 “ 城 门 失火 ， 珊 及 池 鱼 ”的 道理 是 一 样 的 。 而 在 中 
介 者 模式 里 ， 对 象 之 间 几 乎 不 知道 彼此 的 存在 ， 它 们 只 能 通过 中 介 者 对 象 来 互相 影响 对 方 。 
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因此 ,中 介 者 模式 使 各 个 对 象 之 间 得 以 解 耦 ,以 中 介 者 和 对 象 之 间 的 一 对 多 关系 取代 了 对 象 
之 间 的 网 状 多 对 多 关系 。 各 个 对 象 只 需 关 注 自 身 功 能 的 实现 , 对 象 之 间 的 交互 关系 交 给 了 中 介 者 
对 象 来 实现 和 维护 。 

不 过 ， 中 介 者 模式 也 存在 一 些 缺 点 。 其 中 ,最 大 的 缺点 是 系统 中 会 新 增 一 个 中 介 者 对 象 ， 因 
为 对 象 之 间 交 互 的 复杂 性 , 转移 成 了 中 介 者 对 象 的 复杂 性 , 使 得 中 介 者 对 象 经 常 是 巨大 的 。 中 介 
者 对 象 自身 往往 就 是 一 个 难以 维护 的 对 象 。 

我 们 都 知道 ,毒贩 子 虽 然 使 吸毒 者 和 制 毒 者 之 间 的 耦合 度 降低 , 但 毒贩 子 也 要 抽 走 一 部 分 利 
润 。 同 样 ， 在 程序 中 ,中 介 者 对 象 要 占 去 一 部 分 内 存 。 而 且 毒 贩 本 身 还 要 防止 被 警察 抓 住 ， 因 为 
它 了 解 整个 犯罪 链条 中 的 所 有 关系 ， 这 表明 中 介 者 对 象 自身 往往 是 一 个 难以 维护 的 对 象 。 

中 介 者 模式 可 以 非常 方便 地 对 模块 或 者 对 象 进行 解 耦 , 但 对 象 之 间 并 非 一定 需 要 解 耦 。 在 实 
际 项 目 中 , 模块 或 对 象 之 间 有 一 些 依赖 关系 是 很 正常 的 。 毕 竞 我 们 写 程序 是 为 了 快速 完成 项 目 交 
付 生 产 ， 而 不 是 堆砌 模式 和 过 度 设 计 。 关 键 就 在 于 如 何 去 衡 量 对 象 之 间 的 耦合 程度 。 一 般 来 说 ， 
如 果 对 象 之 间 的 复杂 耦合 确实 导致 调用 和 维护 出 现 了 困难 , 而 且 这 些 耦 合 度 随 项 目的 变化 呈 指 数 
增长 曲线 ， 那 我 们 就 可 以 考虑 用 中 介 者 模式 来 重 构 代码 。 
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我 们 玩 魔兽 争霸 的 任务 关 时 ， 对 15 级 乱 加 技能 点 的 野生 英雄 普遍 没有 好 感 ， 而 是 喜欢 留 着 
技能 点 ,在 游戏 的 进行 过 程 中 按 需 加 技能 。 同 样 ， 在 程序 开发 中 ,许多 时 候 都 并 不 希望 某 个 类 天 
生 就 非常 庞大 , 一 次 性 包含 许多 职责 。 那么 我 们 就 可 以 使 用 装饰 者 模式 。 装 饰 者 模式 可 以 动态 地 
给 某 个 对 象 添 加 一 些 额 外 的 职责 ， 而 不 会 影响 从 这 个 类 中 派生 的 其 他 对 象 。 

在 传统 的 面向 对 象 语言 中 ,给 对 象 添加 功能 常常 使 用 继承 的 方式 ,但 是 继承 的 方式 并 不 灵活 ， 
还 会 带 来 许多 问题 : 一 方面 会 导致 超 类 和 子 类 之 间 存 在 强 耦 合 性 ， 当 超 类 改变 时 , 子 类 也 会 随 之 
改变 ; 另 一 方面 , 继承 这 种 功能 复 用 方式 通常 被 称 为 “ 白 箱 复 用 ",“ 白 箱 ” 是 相对 可 见 性 而 言 的 ， 
在 继承 方式 中 ， 超 类 的 内 部 细节 是 对 子 类 可 见 的 ， 继承 常常 被 认为 破坏 了 封闭 性。 

使 用 继承 还 会 带 来 男 外 一 个 问题 ， 在 完成 一 些 功 能 复 用 的 同时 ， 有 可 能 创建 出 大 量 的 子 类 ， 
使 子 类 的 数量 呈 爆 炸 性 增长 。 比 如 现在 有 4 种 型 号 的 自行 车 , 我 们 为 每 种 自行 车 都 定义 了 一 个 单 
独 的 类 。 现 在 要 给 每 种 自行 车 都 装 上 前 灯 、 尾 
灯 和 铃 销 这 3 种 配件 。 如 果 使 用 继承 的 方式 来 给 
每 种 自行 车 创建 子 类 , 则 需要 4x3=12 个 子 类 。 
但 是 如 果 把 前 灯 、 尾 灯 、 铃 销 这 些 对 象 动态 组 
合 到 自行 车 上 面 ， 则 只 需要 额外 增加 3 个 类 。 

这 种 给 对 象 动态 地 增加 职责 的 方式 称 为 装 
饰 者 (decorator ) 模式 。 装 饰 者 模式 能 够 在 不 改 
变 对 象 自身 的 基础 上 ， 在 程序 运行 期 间 给 对 象 
动态 地 添加 职责 。 跟 继承 相 比 ， 装 饰 者 是 一 种 
更 轻便 灵活 的 做 法 ， 这 是 一 种 “ 即 用 即 付 ”的 
方式 ， 比 如 天 冷 了 就 多 穿 一 件 外 套 ， 需 要 飞行 
时 就 在 头 上 插 一 支 竹 晴 昨 ， 遇 到 一 堆 食 尸 鬼 时 
就 点 开 AOE ( 范围 攻击 ) 技能 。 
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15.1 “模拟 传统 面向 对 象 语言 的 装饰 者 模式 


首先 要 提出 来 的 是 ， 作 为 一 门 解释 执行 的 语言 ， 给 JavaScript 中 的 对 象 动态 添加 或 者 改变 职 
责 是 一 件 再 简单 不 过 的 事情 , 虽然 这 种 做 法 改动 了 对 象 自身 , 跟 传统 定义 中 的 装饰 者 模式 并 不 一 
样 ， 但 这 无 疑 更 符合 JavaScript 的 语言 特色 。 代 码 如 下 : 

var obj = { 


name: 'sven', 
address: “深圳 市 ' 


}; 
obj.address = obj.address + "福田 区 '; 
传统 面向 对 象 语言 中 的 装饰 者 模式 在 JavaScript 中 适用 的 场景 并 不 多 ， 如 上 面 代码 所 示 ， 通 
常 我们 并 不 太 介 意 改 动 对 象 自身 。 尽 管 如 此 , 本 闻 我 们 还 是 稍微 模拟 一 下 传统 面向 对 象 语言 中 的 
装饰 者 模式 实现 。 
假设 我 们 在 编写 一 个 飞机 大 战 的 游戏 , 随 着 经 验 值 的 增加 , 我 们 操作 的 飞机 对 象 可 以 升级 成 
更 厉害 的 飞机 , 一 开始 这 些 飞 机 只 能 发 射 普通 的 子弹 , 升 到 第 二 级 时 可 以 发 射 导弹 , 升 到 第 三 级 
时 可 以 发 射 原子 弹 。 
下 面 来 看 代码 实现 ， 首 先是 原始 的 飞机 类 : 


var Plane = function(){} 


Plane.prototype.fire = function(){ 
console.1og( ' 发 射 普通 子弹 ' ); 
} 


接 下 来 增加 两 个 装饰 类 ， 分别 是 导弹 和 原子 弹 : 


var MissileDecorator = function( plane ){ 
this.plane = plane; 


} 


MissileDecorator.prototype.fire = function(){ 
this.plane.fire(); 
console.log( ' 发 射 导 弹 ' ); 

} 


var AtomDecorator = function( plane ){ 
this.plane = plane; 


} 


AtomDecorator.prototype.fire = function(){ 
this.plane.fire(); 
console.log( ' 发 射 原子 弹 ' ); 

} 
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导弹 类 和 原子 弹 类 的 构造 函数 都 接受 参数 plane 对 象 ， 并 且 保 存 好 这 个 参数 ， 在 它们 的 fire 
方法 中 ， 除 了 执行 自身 的 操作 之 外 ， 还 调用 plane 对 象 的 fire 方 法 。 

这 种 给 对 象 动态 增 加 职责 的 方式 , 并 没有 真正 地 改动 对 象 自身 , 而 是 将 对 象 放 和信 另 一 个 对 象 
之 中 , 这 些 对 象 以 一 条 链 的 方式 进行 引用 , 形成 一 个 聚合 对 象 。 这 些 对 象 都 拥有 相同 的 接口 ( fire 
方法 )， 当 请 求 达 到 链 中 的 某 个 对 象 时 ， 这 个 对 象 会 执行 自身 的 操作 ， 随 后 把 请 求 转发 给 链 中 的 
下 一 个 对 象 。 

因为 装饰 者 对 象 和 它 所 装饰 的 对 象 拥有 一 致 的 接口 , 所 以 它们 对 使 用 该 对 象 的 客户 来 说 是 透 
明 的 , 被 装饰 的 对 象 也 并 不 需要 了 解 它 曾经 被 装饰 过 , 这 种 透明 性 使 得 我 们 可 以 递归 地 山 套 任意 
多 个 装饰 者 对 象 ， 如 图 15-1 所 示 。 


AtomDecorator 


2 MissileDecorator 
fire ® > Plane 
fire ® Ld 


fire 


图 15-1 
最 后 看 看 测试 结 
var plane = new Plane(); 


plane = new MissileDecorator( plane ); 
plane = new AtomDecorator( plane ); 


plane.fire(); 
// 分 别 输出 : 发 射 普通 子弹 、 发 射 导弹 、 发 射 原子 弹 


15.2 ”装饰 者 也 是 包装 器 


在 《设计 模式 》 成书 之 前 ，GoF 原 想 把 装 


饰 者 ( decorator ) 模式 称 为 包装 器 (wrapper ) 
模式 。 AtomDecorator 


从 功能 上 而 言 ，decorator 能 很 好 地 描述 这 
个 模式 ,但 从 结构 上 看 ，wrapper 的 说 法 更 加 MsslleDecorator 
贴切 。 装饰 者 模式 将 一 个 对 象 朋 入 男 一 个 对 象 
之 中 , 实际 上 相当 于 这 个 对 象 被 男 一 个 对 象 包 Plane 
装 起 来 ,形成 一 条 包装 链 。 请 求 随 着 这 条 链 依 
次 传递 到 所 有 的 对 象 , 每 个 对 象 都 有 处 理 这 条 
请 求 的 机 会 ， 如 图 15-2 所 示 。 图 15-2 
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15.3” 回 到 JavaScript 的 装饰 者 
JavaScript 语言 动态 改变 对 象 相 当 容易 ， 我 们 可 以 直接 改写 对 象 或 者 对 象 的 某 个 方法 ， 并 不 
需要 使 用 “类 ”来 实现 装饰 者 模式 ， 代 码 如 下 ， 
var plane = { 
fire: function(){ 


console.log( ' 发 射 普通 子弹 ' ); 
} 


} 


var missileDecorator = function(){ 


console.log( ' 发 射 导 弹 ' ); 


var atomDecorator = function(){ 
console.log( ' 发 射 原子 弹 ' ); 
} 


var fire1 = plane.fire; 


plane.fire = function(){ 
fire1(); 
missileDecorator(); 


} 
var fire2 = plane.fire; 


plane.fire = function(){ 
fire2(); 
atomDecorator(); 


} 


plane.fire(); 
// 分 别 输出 : 发 射 普通 子弹 、 发 射 导弹 、 发 射 原子 弹 


15.4 ”装饰 函数 


在 JavaScript 中 ， 几 乎 一 切 都 是 对 象 ， 其 中 函数 又 被 称 为 一 等 对 象 。 在 平时 的 开发 工作 中 ， 
也 许 大 部 分 时 间 都 在 和 函数 打交道 。 在 JavaScript 中 可 以 很 方便 地 给 某 个 对 象 扩展 属性 和 方法 ， 
但 却 很 难 在 不 改动 某 个 函数 源 代码 的 情况 下 ,给 该 函数 添加 一 些 额 外 的 功能 ,在 代码 的 运行 期 间 ， 
我 们 很 难 切 入 某 个 函数 的 执行 环境 。 

要 想 为 函数 添加 一 些 功 能 , 最 简单 粗暴 的 方式 就 是 直接 改写 该 函数 , 但 这 是 最 差 的 办 法 , 直 
接 违 反 了 开放 -封闭 原则 : 

var a = function(){ 


alert (1); 
} 
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// 政 成 : 


var a = function(){ 
alert (1); 
alert (2); 
} 
很 多 时 候 我 们 不 想 去 碰 原 函数 ,也 许 原 函 数 是 由 其 他 同事 编写 的 , 里 面 的 实现 非常 杂乱 。 其 
至 在 一 个 古老 的 项 目 中 , 这 个 函数 的 源 代码 被 隐藏 在 一 个 我 们 不 愿 碰 触 的 阴暗 角落 里 。 现 在 需要 
一 个 办 法 ， 在 不 改变 函数 源 代码 的 情况 下 ， 能 给 函数 增加 功能 ， 这 正 是 开放 -封闭 原则 给 我 们 指 
出 的 光明 道路 。 
其 实在 15.3 节 的 代码 中 ,我 们 已 经 找到 了 一 种 答案 , 通过 保存 原 引 用 的 方式 就 可 以 改写 某 个 
函数 : 
var a = function(){ 


alert (1); 


} 


var a = ai 


a = function(){ 
_a(); 
alert (2); 


a(); 

这 是 实际 开发 中 很 常见 的 一 种 做 法 ， 比 如 我 们 想 给 window 绑 定 onload 事件 ， 但 是 又 不 确定 
这 个 事件 是 不 是 已 经 被 其 他 人 绑 定 过 ， 为 了 避免 覆盖 掉 之 前 的 window.onload 函数 中 的 行为 ， 我 
们 一 般 都 会 先 保存 好 原先 的 window.onload， 把 它 放 和 新 的 window.onload 里 执行 : 


window.onload = function(){ 
alert (1); 


} 


var onload = window.onload || function(){}; 


window.onload = function(){ 
_onload(); 
alert (2); 

} 

这 样 的 代码 当然 是 符合 开放 -封闭 原则 的 ， 我 们 在 增加 新 功能 的 时 候 ， 确 实 没有 修改 原来 的 

window.onload 代码 ， 但 是 这 种 方式 存在 以 下 两 个 问题 。 

口 必须 维护 _ onload 这 个 中 间 变 量 ， 虽 然 看 起 来 并 不 起 眼 ， 但 如 果 函 数 的 装饰 链 较 长 ， 或 者 

需要 装饰 的 函数 变 多 ， 这 些 中 间 变 量 的 数量 也 会 越 来 越 多 。 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


214 第 15 章 装饰 者 模式 


口 其 实 还 遇 到 了 this 被 劫持 的 问题 ,在 window.onload 的 例子 中 没有 这 个 烦恼 ， 是 因为 调用 
普通 国 数 onload 时 ，this 也 指向 window， 跟 调用 window.onload 时 一 样 ( 函数 作为 对 象 的 
方法 被 调用 时 ，this 指向 该 对 象 , 所 以 此 处 this 也 只 指向 window )。 现 在 把 window.onload 
换 成 document .getElementById， 代 码 如 下 : 


var getElementById = document.getElementById; 


document.getElementById = function( id ){ 
alert (1); 
return getElementById( id ); // (1) 
} 


var button = document.getElementById( 'button' ); 
</script> 


执行 这 段 代码 ， 我 们 看 到 在 弹出 alert(1) 之 后 ， 紧 接着 控制 台 抛 出 了 异常 : 


// 输出 : Uncaught TypeError: Illegal invocation 


异常 发 生 在 (1) 处 的 _getElementById( id ) 这 句 代 码 上 , 此 时 _getElementById 是 一 个 全 局 函数 ， 
当 调 用 一 个 全 局 函数 时 ,this 是 指向 window 的 , 而 document.getElementById 方法 的 内 部 实现 需要 
使 用 this 引用 ，this 在 这 个 方法 内 预期 是 指向 document ， 而 不 是 window, 这 是 错误 发 生 的 原因 ， 
所 以 使 用 现在 的 方式 给 函数 增加 功能 并 不 保险 。 


改进 后 的 代码 可 以 满足 需求 ， 我 们 要 手动 把 document 当 作 上 下 文 this 传人 _getElementById: 


<html> 
<button id="button"></button> 
<script> 
var getElementById = document.getElementById; 


document .getElementById = function(){ 

alert (1); 

return getElementById.apply( document, arguments ); 
} 


var button = document.getElementById( 'button' ); 
</script> 
</html> 


但 这 样 做 显然 很 不 方便 ,下 面 我 们 引入 本 书 3.7 节 介 绍 过 的 AOP, 来 提供 一 种 完美 的 方法 给 
函数 动态 增加 功能 。 


15.5 用 AOP 装饰 函数 


首先 给 出 Function.prototype.before 方法 和 Function.prototype.after 方法 : 
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Function.prototype.before = function( beforefn ){ 
var _ self = this; // 保存 原 函 数 的 引用 
return function(){ ”// 返回 包含 了 原 函 数 和 新 函数 的 "代理 "函数 
beforefn.apply( this，arguments ); // 执行 新 函数 ， 且 保证 this 不 被 劫持 ， 新 函数 接受 的 参数 
// 也 会 被 原封 不 动 地 传 入 原 函 数 ， 新 函数 在 原 函 数 之 前 执行 
return ”self.apply( this，arguments ); // 执行 原 函 数 并 返回 原 函 数 的 执行 结果 ， 
// 并 且 保 证 this 不 被 劫持 


} 


Function.prototype.after = function( afterfn ){ 
var _ self = this; 
return function(){ 
var ret = _self.apply( this, arguments ); 
afterfn.apply( this, arguments ); 
return ret; 
} 
}; 


Function.prototype.before 接受 一 个 函数 当 作 参 数 ， 这 个 函数 即 为 新 添加 的 函数 ， 它 装载 了 
新 添加 的 功能 代码 。 


接 下 来 把 当前 的 this 保存 起 来 ， 这 个 this 指向 原 函数 ， 然 后 返回 一 个 “代理 ”函数 ， 这 个 
“代理 ”函数 只 是 结构 上 像 代理 而 已 ,并 不 承担 代理 的 职责 ( 比如 控制 对 象 的 访问 等 ) 它 的 工作 
是 把 请 求 分 别 转发 给 新 添加 的 函数 和 原 函数 , 且 负 责 保证 它们 的 执行 顺序 , 让 新 添加 的 函数 在 原 
函数 之 前 执行 〈 前 置 装饰 )， 这 样 就 实现 了 动态 装饰 的 效果 。 


我 们 注意 到 ， 通 过 Function.prototype.apply 来 动态 传人 正确 的 this， 保 证 了 水 数 在 被 装饰 
之 后 ，this 不 会 被 劫持 。 


Function.prototype.after 的 原理 跟 Function.prototype.before 一 模 一 样 ， 唯 一 不 同 的 地 方 在 
于 让 新 添加 的 函数 在 原 函 数 执行 之 后 再 执行 。 


下 面 来 试 试用 Function.prototype.before 的 威力 : 


<html> 
<button id="button"></button> 
<script> 
Function.prototype.before = function( beforefn ){ 
var _ self = this; 
return function(){ 
beforefn.apply( this, arguments ); 
return _ self.apply( this, arguments ); 


} 


document .getElementById = document.getElementById.before(function(){ 
alert (1); 
}); 


var button = document.getElementById( 'button' ); 
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中 


console.log( button ); 
</script> 
</html> 


再 回 到 window.onload 的 例子 ， 看 看 用 Function.prototype.before 来 增加 新 的 window.onload 


事件 是 多 么 简单 : 


window.onload = function(){ 
alert (1); 
} 


window.onload = ( window.onload || function(){} ).after(function(){ 
alert (2); 

}).after(function(){ 
alert (3); 

}).after(function(){ 
alert (4); 

}); 


值得 提 到 的 是 ， 上 面 的 AOP 实现 是 在 Function.prototype 上 添加 before 和 after 方 法, 但 许 


多 人 不 喜欢 这 种 污染 原型 的 方式 , 那么 我 们 可 以 做 一 些 变通 , 把 原 函数 和 新 函数 都 作为 参数 传人 
before 或 者 after 方法 : 


var before = function( fn，beforefn ){ 
return function(){ 
beforefn.apply( this, arguments ); 
return fn.apply( this, arguments ); 
} 
} 


var a = before( 
function(){alert (3)}, 
function(){alert (2)} 
); 


a = before( a, function(){alert (1);} ); 
a(); 


15.6 ”AOP 的 应 用 实例 


用 AOP 装饰 函数 的 技巧 在 实际 开发 中 非常 有 用 。 不 论 是 业务 代码 的 编写 , 还 是 在 框架 层面 ， 


我 们 都 可 以 把 行为 依照 职责 分 成 粒度 更 细 的 函数 , 随后 通过 装饰 把 它们 合并 到 一 起 , 这 有 助 于 我 
们 编写 一 个 松 耦 合 和 高 复 用 性 的 系统 。 


这 一 方 将 介绍 几 个 例子 ， 带 大 家 进一步 理解 装饰 函数 的 威力 。 


15.6.1 数据 统计 上 报 


分 离 业务 代码 和 数据 统计 代码 ， 无 论 在 什么 语言 中 ， 都 是 AOP 的 经 典 应 用 之 一 。 在 项 目 开 发 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


15.6 AOP 的 应 用 实例 


217 


的 结尾 阶段 难免 要 加 上 很 多 统计 数据 的 代码 ， 这 些 过 程 可 能 让 我 们 被 迫 改 动 早已 封装 好 的 函 


数 。 


比如 页 面 中 有 一 个 登录 button, 点 击 这 个 button 会 弹出 登录 浮 层 , 与 此 同时 要 进行 数据 上 报 ， 


来 统计 有 多 少 用 户 点 击 了 这 个 登录 button: 


<html> 
<button tag="login”id="button"> 点 击 打开 登录 浮 层 </button> 
<script> 


var showLogin = function(){ 
console.log( ' 打 开 登 录 浮 层 ' ); 
log( this.getAttribute( 'tag' ) ); 
} 


var log = function( tag ){ 

console.log( "上报 标签 为 : ”+ tag ); 

// (new Image).src = 'http:// xxx.com/report?tag='" + tag; // 真正 的 上 报 代码 略 
} 


document .getElementById( 'button' ).onclick = showLogin; 


</script> 
</html> 


我 们 看 到 在 showLogin 函数 里 ， 既 要 负责 打开 登录 浮 层 ， 又 要 负责 数据 上 报 ， 这 是 两 个 


的 功能 ， 在 此 处 却 被 耦合 在 一 个 函数 里 。 使 用 AOP 分 离 之 后 ， 代 码 如 下 : 


<html> 
<button tag="login”id="button"> 点 击 打开 登录 浮 层 </button> 
<script> 


Function.prototype.after = function( afterfn ){ 
var _ self = this; 
return function(){ 
var ret = _ self.apply( this, arguments ); 
afterfn.apply( this, arguments ); 
return ret; 
} 
}; 


var showLogin = function(){ 


console.log( ' 打 开 登 录 浮 层 ' ); 
} 


var log = function(){ 
console.1og( “上 报 标签 为 : ' + this.getAttribute( 'tag' ) ); 
} 


showLogin = showLogin.after( log );  ”// 打开 登录 浮 层 之 后 上 报 数据 
document .getElementById( 'button' ).onclick = showLogin; 


</script> 
</html> 
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15.6.2 ”用 AOP 动 态 改 变 函 数 的 参数 


观察 Function.prototype.before 方法 : 


Function.prototype.before = function( beforefn ){ 
var _ self = this; 
return function(){ 
beforefn.apply( this, arguments ); // (1) 
return _ self.apply( this, arguments ); // (2) 
} 
} 


从 这 段 代 码 的 (1) 处 和 (2) 处 可 以 看 到 ，beforefn 和 原 函 数 _self 共用 一 组 参数 列表 
arguments ， 当 我 们 在 beforefn 的 函数 体内 改变 arguments 的 时 候 ， 原 函数 _self 接收 的 参数 列 
表 自然 也 会 变化 。 

下 面 的 例子 展示 了 如 何 通过 Function.prototype.before 方法 给 函数 func 的 参数 param 动态 地 
添加 属性 b: 


var func = function( param ){ 
console.log( param ); // 输出 : {a: "a", b: "b"} 


func = func.before( function( param ){ 
param.b = 'b'; 


)); 
func( {a: 'a'} ); 


现在 有 一 个 用 于 发 起 ajax 请 求 的 函数 ， 这 个 函数 负责 项 目 中 所 有 的 ajax 异步 请 求 : 


var ajax = function( type, url, param ){ 
console.dir(param); 
// 发 送 ajax 请 求 的 代码 略 

}; 


ajax( 'get', 'http:// xxx.com/userinfo', { name: 'sven' } ); 

上 面 的 伪 代 码 表示 向 后 台 cgi 发 起 一 个 请 求 来 获取 用 户 信 息 ， 传 递 给 cgi 的 参数 是 { name: 
'sven' }。 

ajax 函数 在 项 目 中 一 直 运 转 良 好 ， 跟 cgi 的 合作 也 很 愉快 。 直 到 有 一 天 ， 我 们 的 网 站 遭受 了 
CSRF 攻击 。 解 决 CSRF 攻击 最 简单 的 一 个 办 法 就 是 在 HTTP 请 求 中 带 上 一 个 Token 参数 。 

假设 我 们 已 经 有 一 个 用 于 生成 Token 的 函数 : 


var getToken = function(){ 
return “Token '; 
} 
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现在 的 任务 是 给 每 个 ajax 请 求 都 加 上 Token 参数 : 


var ajax = function( type, url, param ){ 
param = param || {}; 
Param.Token = getToken(); // 发 送 ajax 请 求 的 代码 略 ... 
}; 
虽然 已 经 解决 了 问题 ， 但 我 们 的 ajax 函数 相对 变 得 僵硬 了 ， 每 个 从 ajax 函数 里 发 出 的 请 求 
都 自动 带 上 了 Token 参数 ， 虽 然 在 现在 的 项 目 中 没有 什么 问题 ， 但 如 果 将 来 把 这 个 函数 移植 到 其 
他 项 目 上 ， 或 者 把 它 放 到 一 个 开源 库 中 供 其 他 人 使 用 ，Token 参数 都 将 是 多 余 的 。 


也 许 另 一 个 项 目 不 需要 验证 Token， 或 者 是 Token 的 生成 方式 不 同 ， 无 论 是 哪 种 情况 ， 都 必 
须 重 新 修改 ajax 函数 。 


为 了 解决 这 个 问题 ， 先 把 ajax 函数 还 原 成 一 个 干净 的 函数 : 


var ajax= function( type, url, param ){ 
console.log(param); // 发 送 ajax 请 求 的 代码 略 
}; 


然后 把 Token 参数 通过 Function.prototyte.before 装饰 到 ajax 函数 的 参数 param 对 象 中 : 


var getToken = function(){ 
return 'Token'; 
} 


ajax = ajax.before(function( type, url, param ){ 
param. Token = getToken(); 
}); 


ajax( 'get', 'http:// xxx.com/userinfo', { name: 'sven' } ); 


从 ajax 函数 打印 的 log 可 以 看 到 ，Token 参数 已 经 被 附加 到 了 ajax 请 求 的 参数 中 : 


{name: "sven", Token: "Token"} 


明显 可 以 看 到 ， 用 AOP 的 方式 给 ajax 函数 动态 装饰 上 Token 参数 ， 保 证 了 ajax 函数 是 一 
个 相对 纯净 的 函数 ,提高 了 ajax 函数 的 可 复 用 性 , 它 在 被 迁 往 其 他 项 目的 时 候 , 不 需要 做 任何 
修改 。 


15.6.3 ”插件 式 的 表单 验证 


我 们 很 多 人 都 写 过 许多 表单 验证 的 代码 ， 在 一 个 Web 项 目 中 ， 可 能 存在 非常 多 的 表单 ， 如 
注册 、 登 录 、 修 改 用 户 信 息 等 。 在 表单 数据 提交 给 后 台 之 前 ， 常 常 要 做 一 些 校 验 ， 比 如 登录 的 时 
候 需 要 验证 用 户 名 和 密码 是 否 为 空 ， 代 码 如 下 : 

<html> 


<body> 
用 户 名 : 《input id="username" type="text"/> 
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密码 : “input id="password" type="password"/> 
<input id="submitBtn” type="button”value=" 提 交 "> 

</body> 

<script> 

var username = document.getElementById( 'username' ), 
password = document.getElementById( “password”)， 
submitBtn = document.getElementById( 'submitBtn' ); 


var formSubmit = function(){ 
if ( username.value ){ 
return alert ( “用户 名 不 能 为 空 ”); 


} 


if ( password.value '" )t{ 
return alert (“密码 不 能 》 


空 ， 
工 3 


} 


var param = { 
username: username.value, 
password: password.value 
} 
ajax( 'http:// xxx.com/login', param ); 


} 


submitBtn.onclick = function(){ 
formSubmit(); 
} 
</ScTipt> 
</html> 


// ajax 具体 实现 略 


formSubmit 函数 在 此 处 承担 了 两 个 职责 ， 除 了 提交 ajax 请 求 之 外 ， 还 要 验证 用 户 输入 的 合法 


性 。 这 种 代码 一 来 会 造成 函数 腾 有 种， 职责 混乱 ， 二 来 谈 不 上 任何 
本 节 的 目的 是 分 离 校 验 输入 和 提交 ajax 请 求 的 代码 ， 我 们 # 


可 复 用 性 。 
巴 校 验 输 入 的 逻辑 放 到 validata 


函数 中 ， 并 且 约 定 当 validata 限 数 返回 false 的 时 候 ， 表 示 校 验 未 通过 ， 代 码 如 下 : 


var validata = function(){ 
if ( username.value "" ){ 
alert (“' 用 户 名 不 能 为 空 ');) 
return false; 


} 


if ( password.value 
alert ( “密码 不 能 为 空 ”); 
return false; 


} 
var formSubmit = function(){ 
if ( validata() false ){ 
return; 
} 


var param = { 


// 校 验 未 通过 
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username: username.value, 
password: password.value 


} 


ajax( 'http:// xxx.com/login', param ); 


submitBtn.onclick = function(){ 
formSubmit(); 
} 


现在 的 代码 已 经 有 了 一 些 改进 , 我 们 把 校 验 的 逻辑 都 放 到 了 validata 函数 中 , 但 formSubmit 
函数 的 内 部 还 要 计算 validata 函数 的 返回 值 ， 因 为 返回 值 的 结果 表明 了 是 否 通过 校 验 。 


接 下 来 进一步 优化 这 段 代码 , 使 validata 和 formsubmit 完全 分 离开 来 。 首先 要 改写 Function. 
prototype.before， 如 果 peforefn 的 执行 结果 返回 false, 表示 不 再 执行 后 面 的 原 函 数 , 代码 如 下 : 


Function.prototype.before = function( beforefn ){ 
var _ self = this; 
return function(){ 
if ( beforefn.apply( this, arguments ) === false ){ 
// beforefn 返回 false 的 情况 直接 return， 不 再 执行 后 面 的 原 函 数 
return; 


return _ self.apply( this, arguments ); 


} 


var validata = function(){ 
if ( username.value === '' ){ 
alert (“' 用 户 名 不 能 为 空 ');} 
return false; 


if ( password.value === '' ){ 
alert ( “密码 不 能 为 空 ' ); 
return false; 


} 


var formSubmit = function(){ 
var param = { 
username: username.value, 
password: password.value 
} 
ajax( 'http:// xxx.com/login', param ); 


} 
formSubmit = formSubmit.before( validata ); 


submitBtn.onclick = function(){ 
formSubmit(); 
} 
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在 这 段 代码 中 ， 校 验 输 入 和 提交 表单 的 代码 完全 分 离开 来 ， 它 们 不 再 有 任何 耦合 关系 ， 
formSubmit = formSubmit.before( validata ) 这 名 代码 ， 如 同 把 校 验 规 则 动态 接 在 formsubmit 函数 
之 前 ，validata 成 为 一 个 即 插 即 用 的 函数 ， 它 甚至 可 以 被 写成 配置 文件 的 形式 ， 这 有 利于 我 们 分 
开 维 护 这 两 个 函数 。 再 利用 策略 模式 稍 加 改造 ， 我 们 就 可 以 把 这 些 校 验 规则 都 写成 插件 的 形式 ， 
用 在 不 同 的 项 目 当 中 。 

值得 注意 的 是 , 因为 子 数 通过 Function.prototype.before 或 者 Function.prototype.after 被 装 
饰 之 后 , 返回 的 实际 上 是 一 个 新 的 函数 , 如 果 在 原 函 数 上 保存 了 一 些 属性 , 那么 这 些 属性 会 丢失 。 
代码 如 下 : 


var func = function(){ 
alert( 1 ); 


func.a = 'a'; 


func = func.after( function(){ 
alert( 2 ); 
}); 


alert ( func.a ); // 输出 : undefined 


男 外 ,这 种 装饰 方式 也 共 加 了 函数 的 作用 域 ,如果 装饰 的 链条 过 长 ， 性 能 上 也 会 受到 一 些 


15.7 ”装饰 者 模式 和 代理 模式 


装饰 者 模式 和 第 6 章 代理 模式 的 结构 看 起 来 非常 相像, 这 两 种 模式 都 描述 了 怎样 为 对 象 提供 
一 定 程度 上 的 间接 引用 ,它们 的 实现 部 分 都 保留 了 对 另外 一 个 对 象 的 引用 ,并 且 向 那个 对 象 发 送 
请 求 。 

代理 模式 和 装饰 者 模式 最 重要 的 区 别 在 于 它们 的 意图 和 设计 目的 。 代 理 模式 的 目的 是 ， 当 直 
接 访问 本 体 不 方便 或 者 不 符合 需要 时 ， 为 这 个 本 体 提供 一 个 替代 者 。 本 体 定义 了 关键 功能 ， 而 代 
理 提供 或 拒绝 对 它 的 访问 ,或 者 在 访问 本 体 之 前 做 一 些 额外 的 事情 。 装 饰 者 模式 的 作用 就 是 为 对 
象 动态 加 入 行为 。 换 句 话说 ,代理 模式 强调 一 种 关系 ( Proxy 与 它 的 实体 之 间 的 关系 ) 这 种 关系 
可 以 静态 的 表达 ,也 就 是 说 , 这 种 关系 在 一 开始 就 可 以 被 确定 。 而 装饰 者 模式 用 于 一 开始 不 能 确 
定 对 象 的 全 部 功能 时 。 代 理 模式 通常 只 有 一 层 代理 -本 体 的 引用 ， 而 装饰 者 模式 经 常会 形成 一 条 
长 长 的 装饰 链 。 

在 虚拟 代理 实现 图 片 预 加 载 的 例子 中 ， 本 体 负责 设置 img 节点 的 sre， 代 理 则 提供 了 预 加 载 
的 功能 ,这 看 起 来 也 是 “加 入 行为 ”的 一 种 方式 ,但 这 种 加 入 行为 的 方式 和 装饰 者 模式 的 偏重 点 
是 不 一 样 的 。 装饰 者 模式 是 实 实在 在 的 为 对 象 增加 新 的 职责 和 行为 ,而 代理 做 的 事情 还 是 跟 本 体 
一 样 ， 最 终 都 是 设置 src。 但 代理 可 以 加 入 一 些 “聪明 ”的 功能 ， 比 如 在 图 片 真正 加 载 好 之 前 ， 
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先 使 用 一 张 占 位 的 loading 图 片 反 馈 给 客户 。 
15.8 ”小 结 


本 章 通 过 数据 上 报 、 统 计 函 数 的 执行 时 间 、 动 态 改变 函数 参数 以 及 插件 式 的 表单 验证 这 4 个 
例子 ,我们 了 解 了 装饰 函数 ， 它 是 JavaScript 中 独特 的 装饰 者 模式 。 这 种 模式 在 实际 开发 中 非常 
有 用 ,除了 上 面 提 到 的 例子 ， 它 在 框架 开发 中 也 十 分 有 用 。 作 为 框架 作者 ,我 们 希望 框架 里 的 函 
数 提供 的 是 一 些 稳定 而 方便 移植 的 功能 , 那些 个 性 化 的 功能 可 以 在 框架 之 外 动态 装饰 上 去 , 这 可 
以 避免 为 了 让 框架 拥有 更 多 的 功能 ， 而 去 使 用 一 些 if、else 语句 预测 用 户 的 实际 需要 。 
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状态 模式 是 一 种 非 同 寻 常 的 优秀 模式 , 它 也 许 是 解决 某 些 需 求 场景 的 最 好 方法 。 虽然 状态 模 
式 并 不 是 一 种 简单 到 一 目 了 然 的 模式 ( 它 往往 还 会 带 来 代码 量 的 增加 )， 但 你 一 旦 明白 了 状态 模 
式 的 精髓 ， 以 后 一 定 会 感谢 它 带 给 你 的 无 与 伦比 的 好 处 。 


状态 模式 的 关键 是 区 分 事物 内 部 的 状态 ， 事物 内 部 状态 的 改变 往往 会 带 来 事物 的 行为 改变 。 
16.1 初 识 状态 模式 
我 们 来 想象 这 样 一 个 场景 : 有 一 个 电灯 ,电灯 上 面 只 有 一 个 开关 。 当 电灯 开 着 的 时 候 ， 此 时 


按 下 开关 ， 电 灯会 切换 到 关闭 状态 ; 再 按 一 次 开关 ,电灯 又 将 被 打开 。 同 一 个 开关 按钮 ， 在 不 同 
的 状态 下 ， 表 现 出 来 的 行为 是 不 一 样 的 。 
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现在 用 代码 来 描述 这 个 场景 ,首先 定义 一 个 Light 类 , 可 以 预见 ， 电灯 对 象 light 将 从 Light 
类 创建 而 出 ， light 对 象 将 拥有 两 个 属性 ， 我 们 用 state 来 记录 电灯 当前 的 状态 ， 用 button 表示 
具体 的 开关 按钮 。 下 面 来 编写 这 个 电灯 程序 的 例子 。 


Hy 


16.1.1 第 一 个 例子 : 电灯 程序 
首先 给 出 不 用 状态 模式 的 电灯 程序 实现 : 
var Light = function(){ 


this.state = 'off'; // 给 电灯 设置 初始 状态 off 
this.button = null; // 电灯 开关 按钮 


}; 

接 下 来 定义 Light.prototype.init 方法 ， 该 方法 负责 在 页 面 中 创建 一 个 真实 的 button 节点 ， 
假设 这 个 button 就 是 电灯 的 开关 按钮 ， 当 button 的 onclick 事件 被 触发 时 , 就 是 电灯 开关 被 按 下 
的 时 候 ， 代 码 如 下 : 


Light.prototype.init = function(){ 
var button = document.createElement( 'button' ), 
self = this; 


button.innerHTML = ' 开 关 '; 
this.button = document.body.appendChild( button ); 
this.button.onclick = function(){ 
self.buttonWaspressed(); 
} 
}; 


当 开关 被 按 下 时 ， 程 序 会 调用 self.buttonWasPressed 方法 ， 开关 按 下 之 后 的 所 有 行为 ， 都 
将 被 封装 在 这 个 方法 里 ， 代 码 如 下 : 


Light.prototype.buttonWasPpressed = function(){ 
if ( this.state === 'off' ){ 
console.log( ' 开 灯 ' ); 
this.state = 'on'; 
}else if ( this.state === 'on' ){ 
Console.1og(“ 关 灯 ”); 
this.state = 'off'; 


} 
}; 


var light = new Light(); 

light.init(); 

OK, 现在 可 以 看 到 , 我 们 已 经 编写 了 一 个 强壮 的 状态 机 ， 这 个 状态 机 的 逻辑 既 简 单 又 绩 密 ， 
看 起 来 这 段 代 码 设计 得 无 懈 可 击 ， 这 个 程序 没有 任何 bug。 实 际 上 这 种 代码 我 们 已 经 编写 过 无 数 
遍 ， 比 如 要 交替 切换 一 个 button 的 class， 跟 此 例 一 样 ， 往 往 先 用 一 个 变量 state 来 记录 按钮 的 
当前 状态 ， 在 事件 发 生 时 ， 再 根据 这 个 状态 来 决定 下 一 步 的 行为 。 
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令 人 遗憾 的 是 , 这 个 世界 上 的 电灯 并 非 只 有 一 种 。 许 多 酒店 里 有 为 外 一 种 电灯 ,这 种 电灯 也 
只 有 一 个 开关 , 但 它 的 表现 是 : 第 一 次 按 下 打开 弱 光 ,第 二 次 按 下 打开 强 光 ,第 三 次 才 是 关闭 电 
灯 。 现 在 必须 改造 上 面 的 代码 来 完成 这 种 新 型 电灯 的 制造 : 


Light.prototype.buttonWasPressed = function(){ 

if ( this.state === 'off' ){ 
console.log(' 弱 光 ' ); 
this.state = “weakLight '; 

}else if ( this.state === “weakLight” ){ 
console.log(“' 强 光 ' ); 
this.state = 'strongLight'; 

}else if ( this.state === 'strongLight' ){ 
console.log(' 关 灯 ' ); 
this.state = 'off'; 

} 


}; 

现在 这 个 反例 先 告 一 段落 ， 我 们 来 考虑 一 下 上 述 程 序 的 缺点 。 

口 很 明显 buttonWasPressed 方 法 是 违反 开放 -封闭 原则 的 ， 每 次 新 增 或 者 修改 light 的 状态 ， 
都 需要 改动 buttonWasPressed 方法 中 的 代码 ， 这 使 得 buttonWasPressed 成 为 了 一 个 非常 不 
稳定 的 方法 。 

口 所 有 跟 状态 有 关 的 行为 ,都 被 封装 在 buttonWasPressed 方法 里 ， 如果 以 后 这 个 电灯 又 增加 
了 强 强 光 、 超 强 光 和 终极 强 光 ， 那 我 们 将 无 法 预计 这 个 方法 将 膨胀 到 什么 地 步 。 当 然 为 
了 简化 示例 ， 此 处 在 状态 发 生 改变 的 时 候 ， 只 是 简单 地 打印 一 条 log 和 改变 button 的 
innerHTML。 在 实际 开发 中 ， 要 处 理 的 事情 可 能 比 这 多 得 多 ， 也 就 是 说 ，buttonWasPressed 
方法 要 比 现在 庞大 得 多 。 

口 状态 的 切换 非常 不 明显 ， 仅 仅 表 现 为 对 state 变量 赋值 ， 比 如 this.state = 'weakLight'。 
在 实际 开发 中 ， 这 样 的 操作 很 容易 被 程序 员 不 小 心 漏 掉 。 我 们 也 没有 办 法 一 目 了 然 地 明 
白 电 灯 一 共有 多 少 种 状态 ， 除 非 耐心 地 读 完 buttonWasPressed 方法 里 的 所 有 代码 。 当 状 
态 的 种 类 多 起 来 的 时 候 ， 某 一 次 切换 的 过 程 就 好 像 被 埋藏 在 一 个 巨大 方法 的 某 个 阴暗 角 
落 里 。 

口 状态 之 间 的 切换 关系 , 不 过 是 往 buttonWasPressed 方法 里 堆砌 if、else 语句 , 增加 或 者 修 
改 一 个 状态 可 能 需要 改变 若干 个 操作 ， 这 使 buttonWasPressed 更 加 难以 阅读 和 维护 。 


16.1.2 ”状态 模式 改进 电灯 程序 


现在 我 们 学 习 使 用 状态 模式 改进 电灯 的 程序 。 有 意思 的 是 , 通常 我 们 谈 到 封装 ， 一般 都 会 优 
先 封 装 对 象 的 行为 ， 而 不 是 对 象 的 状态 。 但 在 状态 模式 中 刚好 相反 ,状态 模式 的 关键 是 把 事物 的 
每 种 状态 都 封装 成 单独 的 类 , 跟 此 种 状态 有 关 的 行为 都 被 封装 在 这 个 类 的 内 部 , 所 以 button 被 按 
下 的 的 时 候 ， 只 需要 在 上 下 文中 ,把 这 个 请 求 委 托 给 当前 的 状态 对 象 即 可 ,该 状态 对 象 会 负责 演 
染 它 自身 的 行为 ， 如 图 16-1 所 示 。 
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WeakLightState 


function pd 
buttonWaspressed(){} 和 一 > consolelog ( 强 光 ') 


StrongLightState 


function i 
buttonWaspressed(){} 和 一 > consolelog ( 关 灯 ) 


OffLightState 


function re 
buttonWaspressed(){} 呈 一 > console.log(' 弱 光 ') 


同时 我 们 还 可 以 把 状态 的 切换 规则 事先 分 布 在 状态 类 中 ， 这 样 就 有 效 地 消除 了 原本 存在 的 
量 条 件 分 支 语句 ， 如 图 16-2 所 示 。 


WeakLightState 


OffLightState 


buttonWasPressed 


图 16-2 


下 面 进 入 状态 模式 的 代码 编写 阶段 ， 首 先 将 定义 3 个 状态 类 ， 分 别 是 offLightState、 
WeakLightState、strongLightState。 这 3 个 类 都 有 一 个 原型 方法 buttonWaspPressed， 代 表 在 各 自 状 
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态 下 ， 按 钮 被 按 下 时 将 发 生 的 行为 ， 代 码 如 下 : 
// OffLightState: 


var OffLightState = function( light ){ 
this.light = light; 
}; 


OffLightState.prototype.buttonWasPpressed = function(){ 
console.log(' 弱 光 ' ); ”// offLightstate 对 应 的 行为 


this.light.setState( this.light.weakLightState ); // 切换 状态 到 weakLightState 


}; 

// WeakLightState: 

var WeakLightState = function( light ){ 
this.light = light; 

}; 


WeakLightState.prototype.buttonWasPressed = function(){ 
console.log(“' 强 光 ' ); // weakLightState 对 应 的 行为 


this.light.setState( this.light.strongLightState ); // 切换 状态 到 strongLightState 


}; 

// StrongLightState: 

var StrongLightState = function( light ){ 
this.light = light; 

}; 


StrongLightState.prototype.buttonWasPpressed = function(){ 
console.log(' 关 灯 ' ); ”// strongLightState 对 应 的 行为 


this.light.setState( this.light.offLightState ); // 切换 状态 到 offLightState 


}; 


接 下 来 改写 Light 类 ,现在 不 再 使 用 一 个 字符 串 来 记录 当前 的 状态 ， 而 是 使 用 更 加 立体 化 的 
状态 对 象 。 我 们 在 Light 类 的 构造 函数 里 为 每 个 状态 类 都 创建 一 个 状态 对 象 ， 这 样 一 来 我 们 可 以 


很 明显 地 看 到 电灯 一 共有 多 少 种 状态 ， 代 码 如 下 : 


var Light = function(){ 
this.offLightState = new OffLightState( this ); 
this.weakLightState = new WeakLightState( this ); 
this.strongLightState = new StrongLightState( this ); 
this.button = null; 


下 


在 button 按钮 被 按 下 的 


hl 


有 件 里 ，Context 也 不 再 直接 进行 任何 实质 怕 


self.currState.buttonWasPressed() 将 请 求 委 托 给 当前 持 有 的 状态 对 象 去 执行 ， 


Light.prototype.init = function(){ 
var button = document.createElement( 'button' ), 
self = this; 
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this.button = document.body.appendChild( button ); 
this.button.innerHTML = ' 开 关 '; 


this.currState = this.offLightstate; ”// 设置 当前 状态 


this.button.onclick = function(){ 
self.currState.buttonWaspressed(); 
} 


3 


最 后 还 要 提供 一 个 Light.prototype.setState 方法 ,状态 对 象 可 以 通过 这 个 方法 来 切换 light 


对 象 的 状态 。 前 面 已 经 说 过 ， 状 态 的 切换 规律 事先 被 完好 定义 在 各 个 状态 类 中 。 在 
也 找 不 到 任何 一 个 跟 状态 切换 相关 的 条 件 分 支 语句 : 


Light.prototype.setState = function( newState ){ 
this.currState = newState; 


}; 
现在 可 以 进行 一 些 测试 : 


var light = new Light(); 
light.init(); 


不 出 意外 的 话 , 执行 结果 跟 之 前 的 代码 一 致 ,但 是 使 用 状态 模式 的 好 处 很 明显 ， 


Context 中 再 


它 可 以 使 每 


一 种 状态 和 它 对 应 的 行为 之 间 的 关系 局 部 化 ， 这 些 行为 被 分 散 和 封装 在 各 上 自 对 应 的 状态 类 之 中 ， 


便于 阅读 和 管理 代码 。 


另外 ， 状 态 之 间 的 切换 都 被 分 布 在 状态 类 内 部 ， 这 使 得 我 们 无 需 编写 过 多 的 if、else 条 件 


分 支 语言 来 控制 状态 之 间 的 转换 。 


当 我 们 需要 为 light 对 象 增加 一 种 新 的 状态 时 ， 只 需要 增加 一 个 新 的 状态 类 ， 阴 


了 稍稍 改变 


> 


并 星 


var SuperStrongLightState = function( light ){ 
this.light = light; 
}; 


SuperStrongLightState.prototype.buttonWasPpressed = function(){ 
console.log(' 关 灯 ' ); 
this.light.setState( this.light.offLightState ); 

}; 


然后 在 Light 构造 孔 数 里 新 增 一 个 superStrongLightstate 对 象 : 
var Light = function(){ 


this.offLightState = new OffLightState( this ); 
this.weakLightState = new WeakLightState( this ); 
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this.strongLightState = new StrongLightState( this ); 
this. superStrongLightState = new SuperStrongLightState( this ); // 新 增 superStrongLightState 对 象 


this.button = null; 
}; 


最 后 改变 状态 类 之 间 的 切换 规则 ， 从 strongLightstate---->0ffLightState 变 为 StrongLight- 
State---->SuperStrongLightState ---->0ffLightState: 


StrongLightState.prototype.buttonWasPpressed = function(){ 

console.log(' 超 强 光 ' ); // strongLightState 对 应 的 行为 

this.light.setState( this.1ight.superStrongLightState ); // 切换 状态 到 offLightState 
}; 


16.2 ”状态 模式 的 定义 


通过 电灯 的 例子 ， 相 信 我们 对 于 状态 模式 已 经 有 了 一 定 程度 的 了 解 。 现 在 回头 来 看 GoF 中 
对 状态 模式 的 定义 : 


允许 一 个 对 象 在 其 内 部 状态 改变 时 改变 它 的 行为 ， 对 象 看 起 来 似乎 修改 了 它 的 类 。 


我 们 以 逗号 分 割 ， 把 这 句 话 分 为 两 部 分 来 看 。 第 一 部 分 的 意思 是 将 状态 封装 成 独立 的 类 ,并 
将 请 求 委 托 给 当前 的 状态 对 象 ， 当 对 象 的 内 部 状态 改变 时 , 会 带 来 不 同 的 行为 变化 。 电 灯 的 例子 
足以 说 明 这 一 点 , 在 o 红 和 on 这 两 种 不 同 的 状态 下 , 我 们 点 击 同一 个 按钮 , 得 到 的 行为 反馈 是 截 
然 不 同 的 。 

第 二 部 分 是 从 客户 的 角度 来 看 ,我 们 使 用 的 对 象 , 在 不 同 的 状态 下 具有 截然 不 同 的 行为 , 这 
个 对 象 看 起 来 是 从 不 同 的 类 中 实例 化 而 来 的 ， 实 际 上 这 是 使 用 了 委托 的 效果 。 


16.3 ”状态 模式 的 通用 结构 


在 前 面 的 电灯 例子 中 ， 我 们 完成 了 一 个 状态 模式 程序 的 编写 。 首 先 定义 了 Light 类 ，Light 
类 在 这 里 也 被 称 为 上 下 文 (Context )。 随 后 在 Light 的 构造 函数 中 ， 我 们 要 创建 每 一 个 状态 类 的 
实例 对 象 ，Context 将 持 有 这 些 状 态 对 象 的 引用 ， 以 便 把 请 求 委托 给 状态 对 象 。 用 户 的 请 求 ， 即 
点 击 button 的 动作 也 是 实现 在 Context 中 的 ， 代 码 如 下 : 


var Light = function(){ 
this.offLightstate = new OffLightstate( this );  ”// 持 有 状态 对 象 的 引用 
this.weakLightState = new WeakLightState( this ); 
this.strongLightState = new StrongLightState( this ); 
this.superStrongLightState = new SuperStrongLightState( this ); 
this.button = null; 


)3 


Light.prototype.init = function(){ 
var button = document.createElement( 'button' ), 
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self = this; 


this.button = document.body.appendChild( button ); 
this.button.innerHTML = ' 开 关 '; 
this.currState = this.offLightState; // 设置 默认 初始 状态 


this.button.onclick = function(){ // 定义 用 户 的 请 求 动作 
self.currState.buttonWasPpressed(); 
} 


}; 
接 下 来 可 能 是 个 苦力 活 ， 我 们 要 编写 各 种 状态 类 ，1light 对 象 被 传人 状态 类 的 构造 函数 ， 状 
态 对 象 也 需要 持 有 light 对 象 的 引用 ， 以 便 调 用 light 中 的 方法 或 者 直接 操作 light 对 象 : 


var OffLightState = function( light ){ 
this.light = light; 


了 


OffLightState.prototype.buttonWaspressed = function(){ 
console.log( ' 弱 光 ' ); 
this.light.setState( this.light.weakLightState ); 


» 


16.4 缺少 抽象 类 的 变通 方式 


我 们 看 到 ， 在 状态 类 中 将 定义 一 些 共同 的 行为 方法 ，Context 最 终 会 将 请 求 委 托 给 状态 对 象 
的 这 些 方法 ， 在 这 个 例子 里 ， 这 个 方法 就 是 buttonWasPressed。 无 论 增加 了 多 少 种 状态 类 ， 它 们 
都 必须 实现 buttonWasPressed 方 法。 


在 Java 中, 所 有 的 状态 类 必须 继承 自 一 个 state 抽象 父 类 ， 当 然 如 果 没 有 共同 的 功能 值得 放 
人 抽象 父 类 中 , 也 可 以 选择 实现 state 接口 。 这 样 做 的 原因 一 方面 是 我 们 曾 多 次 提 过 的 向 上 转型 ， 
另 一 方面 是 保证 所 有 的 状态 子 类 都 实现 了 buttonWasPressed 方 法。 遗憾 的 是 ，JavaScript 既 不 支持 
抽象 类 ,也 没有 接口 的 概念 。 所 以 在 使 用 状态 模式 的 时 候 要 格外 小 心 ,如 果 我 们 编写 一 个 状态 子 
类 时 ， 忘 记 了 给 这 个 状态 子 类 实现 buttonWasPressed 方法 ， 则 会 在 状态 切换 的 时 候 抛 出 异常 。 
为 Context 总 是 把 请 求 委 托 给 状态 对 象 的 buttonWasPressed 方法 。 

不 论 怎样 严格 要 求 程 序 员 , 也 许 都 避免 不 了 犯错 的 那 一 天 ， 毕 竞 如 果 没 有 编译 器 的 帮助 ， 只 
依靠 程序 员 的 自觉 以 及 一 点 好 和 运气， 是 不 靠 谱 的 。 这 里 建议 的 解决 方案 跟 《 模 板 方法 模式 》 中 一 
致 ， 让 抽象 父 类 的 抽象 方法 直接 抛 出 一 个 异常 ， 这 个 异常 至 少 会 在 程序 运行 期 间 就 被 发 现 : 


var State = function(){}; 


State.prototype.buttonWasPpressed = function(){ 
throw new Error( ' 父 类 的 buttonWasPressed 方法 必须 被 重 写 ' ); 


二 


var SuperStrongLightState = function( light ){ 
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this.light = light; 
SuperstrongLightState.prototype = new State();  // 继承 抽象 父 类 
SuperStrongLightState.prototype.buttonWaspressed = function(){ // 重 写 buttonWasPressed 方法 


console.log( ' 关 灯 ' ); 
this.light.setState( this.light.offLightState ); 


3 


16.5” 另 一 个 状态 模式 示例 一 一 文件 上 传 


接 下 来 我 们 要 讨论 一 个 复杂 一 点 的 例子 ， 这 原本 是 一 个 真实 的 项 目 ， 是 我 2013 年 重 构 微 去 
上 传 模块 的 经 历 。 实 际 上 , 不论 是 文件 上 传 , 还 是 音乐 、 视 频 播放 器 ， 都 可 以 找到 一 些 明显 的 状 
态 区 分 。 比 如 文件 上 传 程序 中 有 扫描 、 正 在 上 传 、 暂 停 、 上 传 成 功 、 上 传 失败 这 几 种 状态 ,音乐 
播放 器 可 以 分 为 加 载 中 、 正 在 播放 、 暂 停 、 播 放 完毕 这 几 种 状态 。 点 击 同一 个 按钮 ， 在 上 传 中 和 
暂停 状态 下 的 行为 表现 是 不 一 样 的 ， 同 时 它们 的 样式 class 也 不 同 。 下 面 我 们 以 文件 上 传 为 例 进 
行 说 明 。 上 传 中 ， 点 击 按钮 暂停 ， 如 图 16-3 所 示 。 
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图 16-3 
暂停 中 ， 点 击 按钮 继续 播放 ， 如 图 16-4 所 示 。 
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Download.zip 


图 16-4 


看 到 这 里 ,再 联系 一 下 电灯 的 例子 和 之 前 对 状态 模式 的 了 解 , 我 们 已 经 找 了 使 用 状态 模式 的 
理由 。 


16.5.1 更 复杂 的 切换 条 件 


相对 于 电灯 的 例子 ， 文 件 上 传 不 同 的 地 方 在 于 ， 现 在 我 们 将 面临 更 加 复杂 的 条 件 切换 关系 。 
在 电灯 的 例子 中 , 电灯 的 状态 总 是 从 关 到 开 再 到 关 , 或 者 从 关 到 弱 光 、 弱 兴 到 强 光 、 强 光 再 到 关 。 
看 起 来 总 是 循规蹈矩 的 A 一 B 一 C 一 A, 所 以 即使 不 使 用 状态 模式 来 编写 电灯 的 程序 , 而 是 使 用 原 
始 的 if、else 来 控制 状态 切换 ， 我 们 也 不 至 于 在 逻辑 编写 中 迷失 自己 ， 因 为 状态 的 切换 总 是 遵 
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循 一 些 简单 的 规律 ， 代 码 如 下 : 


if ( this.state === 'off' ){ 
console.1log(“ 开 弱 光 ' ); 
this.button.innerHTML =“ 下 一 次 按 我 是 强 光 '; 
this.state = “weakLight '; 

}else if ( this.state === 'weakLight' ){ 
console.1log( ' 开 强 光 ' ); 
this.button.innerHTML = ' 下 一 次 按 我 是 关 灯 '; 
this.state = 'stronglLight'; 

}else if ( this.state === 'strongLight' ){ 
console.log(' 关 灯 ' ); 
this.button.innerHTML = ' 下 一 次 按 我 是 弱 光 '; 
this.state = 'off'; 


} 


而 文件 上 传 的 状态 切换 相 比 要 复杂 得 多 , 控制 文件 上 传 的 流程 需要 两 个 节点 按钮 , 第 一 个 用 
于 暂停 和 继续 上 传 ， 第 二 个 用 于 删除 文件 ， 如 图 16-5 所 示 。 


正在 传输 : 1/1 A 


三 称 一 且 的 地 


Download.zip 


现在 看 看 文件 在 不 同 的 状态 下 ， 点 击 这 两 个 按钮 将 分 别 发 生 什么 行为 。 

口 文件 在 扫描 状态 中 ， 是 不 能 进行 任何 操作 的 ， 既 不 能 暂停 也 不 能 删除 文件 ， 只 能 等 待 扫 
描 完 成 。 扫 描 完成 之 后 ， 根 据 文件 的 mq5 值 判 断 ， 若 确认 该 文件 已 经 存在 于 服务 器 ， 则 

直接 跳 到 上 传 完成 状态 。 如 果 该 文件 的 大 小 超过 允许 上 传 的 最 大 值 ， 或 者 该 文件 已 经 损 
坏 ， 则 跳 往 上 传 失 败 状态 。 剩 下 的 情况 下 才 进 入 上 传 中 状态 。 

口 上 传 过 程 中 可 以 点 击 暂 停 按钮 来 暂停 上 传 ， 暂停 后 点 击 同一 个 按钮 会 继续 上 传 。 


D 扫描 和 上 传 过 程 中 ， 点 击 删 除 按 钮 无 效 ， 只 有 在 暂停 、 上 传 完成 、 上 传 失 败 之 后 ,才能 
删除 文件 。 


16.5.2 一 些 准 备 工作 


微 云 提供 了 一 些 浏览 器 插件 来 帮助 完成 文件 上 传 。 插 件 类 型 根据 浏览 器 的 不 同 ， 有 可 能 是 
Active0bject， 也 有 可 能 是 Webkitplugin。 
上 传 是 一 个 异步 的 过 程 ， 所 以 控件 会 不 停 地 调用 JavaScript 提供 的 一 个 全 局 函数 
window.external.upload， 来 通知 JavaScript 目前 的 上 传 进度 ， 控 件 会 把 当前 的 文件 状态 作为 参数 
state 赛 进 window.external.upload。 在 这 里 无 法 提供 一 个 完整 的 上 传 插件 ， 我 们 将 简单 地 用 
setTimeout 来 模拟 文件 的 上 传 进度 , window.external.upload 范 数 在 此 例 中 也 只 负责 打印 一 些 log: 
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window.external.upload = function( state ){ 
console.log( state ); // 可 能 为 sign、uploading、done、error 
}; 


另外 我 们 需要 在 页 面 中 放置 一 个 用 于 上 传 的 插件 对 象 
var plugin = (function(){ 


var plugin = document.createElement( 'embed' ); 
plugin.style.display = 'none'; 


plugin.type = 'application/txftn-webkit'; 


plugin.sign = function(){ 
console.log(' 开 始 文件 扫描 ); 
} 


plugin.pause = function(){ 
console.log(' 暂 停 文 件 上 传 ' ); 
}; 


plugin.uploading = function(){ 
console.1og(“ 开 始 文件 上 传 ” ); 


}; 


plugin.del = function(){ 
console.1og(“ 删 除 文件 上 传 ”)j 
} 


plugin.done = function(){ 
console.1og( ' 文 件 上 传 完 成 ' ); 
} 


document .body.appendChild( plugin ); 


return plugin; 


])(); 


16.5.3 ”开始 编写 代码 


接 下 来 开始 完成 其 他 代码 的 编写 ， 先 定义 Upload 类 ， 控 制 上 传 过 程 的 对 象 将 从 Upload 类 中 
创建 而 来 : 


var Upload = function( fileName ){ 

this.plugin = plugin; 

this.fileName = fileName; 

this.button1 = null; 

this.button2 = null; 

this.state = 'sign'; ”// 设置 初始 状态 为 waiting 
}; 


Upload.prototype.init 方法 会 进行 一 些 初始 化 工作 ， 包 括 创 建 页 面 中 的 一 些 节 点 。 在 这 些 节 
点 里 , 起 主要 作用 的 是 两 个 用 于 控制 上 传 流程 的 按钮 ,第 a 上 传 , 第 二 个 
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用 于 删除 文件 : 


Upload.prototype.init = function(){ 
var that = this; 
this.dom = document.createElement( 'div' ); 
this.dom.innerHTML = 
"<span> 文 件 名 称 :'+ this.fileName +'</span>\ 
<button data-action="button1"> 扫 描 中 </button>\ 
<button data-action="button2"> 删 除 </button> ' ; 


document .body.appendChild( this.dom ); 
this.button1 = this.dom.querySelector( '[data-action="button1"]'" ); // 第 一 个 按钮 
this.button2 = this.dom.querySelector( '[data-action="button2"]" ); // 第 二 个 按钮 
this.bindEvent(); 

}; 


接 下 来 需要 给 两 个 按钮 分 别 绑 定 点 击 事件 : 
Upload.prototype.bindEvent = function(){ 


var self = this; 
this.button1.onclick = function(){ 


wm 


if ( self.state === 'sign' ){  // 扫描 状态 下 ， 任 何 操作 无 效 
console.1og( “扫描 中 ， 点 击 无 效 ... ); 
}else if ( self.state === 'uploading' ){ // 上 传 中 ， 点 击 切换 到 暂停 
self.changeState( 'pause' ); 
}else if ( self.state === 'pause' ){  ”// 暂停 中 ， 点 击 切换 到 上 传 中 
self.changeState( 'uploading' ); 
}else if ( self.state === 'done' ){ 
console.log( ' 文 件 已 完成 上 传 ， 点 击 无 效 ' ); 
}else if ( self.state === 'error' ){ 
console.1log( ' 文 件 上 传 失败 ， 点 击 无 效 ' ); 
} 
}; 
this.button2.onclick = function(){ 
if ( self.state === 'done' || self.state === 'error' 
|| self.state === 'pause' ){ 
// 上 传 完 成 、 上 传 失败 和 暂停 状态 下 可 以 删除 
self.changeState( 'del' ); 
}else if ( self.state === 'sign' ){ 
console.log( ' 文 件 正 在 扫描 中 ,不 能 删除 ' ) ; 
}else if ( self.state === 'uploading' ){ 
console.log( ' 文 件 正 在 上 传 中 ， 不 能 删除 ' ); 
} 
}; 


je: 


再 接 下 来 是 Upload.prototype.changeState 方法 , 它 负 责 切 换 状态 之 后 的 具体 行为 , 包括 改变 
按钮 的 innerHTML， 以 及 调用 插件 开始 一 些 “ 真 正 ” 的 操作 : 


Upload.prototype.changeState = function( state ){ 


switch( state ){ 
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case 'sign': 
this.plugin.sign(); 
this.button1.innerHTML =“' 扫 描 中 ,任何 操作 无 效 '; 
break; 

case 'uploading': 
this.plugin.uploading() 
this.button1.innerHTML = ' 正 在 上 传 ， 点 击 暂 停 '; 
break; 

case 'pause': 
this.plugin.pause(); 
this.button1.innerHTML = ' 已 暂停 点击 继续 上 传 '; 
break; 

case 'done': 
this.plugin.done(); 
this.button1.innerHTML = ' 上 传 完成 '; 
break; 

Case 'error': 
this.button1.innerHTML = ' 上 传 失败 '; 
break; 

Case 'del': 
this.plugin.del(); 
this.dom.parentNode.removeChild( this.dom ); 
console.1og( “删除 完成 ”)j 
break; 


vv。 


} 


this.state = state; 


}; 
最 后 我 们 来 进行 一 些 测试 工作 : 
var upload0bj = new Upload( 'JavaScript 设计 模式 与 开发 实践 ， ); 


uploadObj .init(); 


window.external.upload = function( state ){ // 插件 调用 JavaScript 的 方法 
uploadObj.changeState( state ); 

window.external.upload( 'sign' ); // 文件 开始 扫描 

setTimeout(function(){ 


window.external.upload( 'uploading' ); // 1 秒 后 开始 上 传 
}, 1000 ); 


setTimeout(function(){ 
window.external.upload( 'done' ); // 5 秒 后 上 传 完成 
},5000 ); 
至 此 就 完成 了 一 个 简单 的 文件 上 传 程序 的 编写 。 当 然 这 仍然 是 一 个 反例 , 这 里 的 缺点 跟 电灯 例 
子 中 的 第 一 段 代码 一 样 ， 程 序 中 充斥 着 if、else 条 件 分 支 ， 状 态 和 行为 都 被 耦合 在 一 个 巨大 的 方 
法 里 , 我 们 很 难 修改 和 扩展 这 个 状态 机 。 文件 状态 之 间 的 联系 如 此 复杂 , 这 个 问题 显得 更 加 严重 了 。 
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16.5.4 ”状态 模式 重 构 文件 上 传 程序 

状态 模式 在 文件 上 传 的 程序 中 , 是 最 优雅 的 解决 办 法 之 一 。 通 过 电灯 的 例子 , 我们 已 经 熟知 
状态 模式 的 结构 了 ， 下 面 就 开始 一 步 步 地 重 构 它 。 
第 一 步 仍然 是 提供 window.external.upload 函数 ， 在 页 面 中 模拟 创建 上 传 插件 ， 这 部 分 代码 
没有 改变 : 


window.external.upload = function( state ){ 
console.log( state ); // 可 能 为 sign、uploading、done、error 


二 


var plugin = (function(){ 
var plugin = document.createElement( 'embed' ); 
plugin.style.display = 'none'; 


plugin.type = "application/txftn-webkit"; 
plugin.sign = function(){ 

console.log( “开始 文件 扫描 ); 
} 


plugin.pause = function(){ 
console.log(' 暂 停 文件 上 传 '); 
}; 


plugin.uploading = function(){ 
console.1log(' 开 始 文件 上 传 '); 
}; 


plugin.del = function(){ 
console.1log(“' 删 除 文件 上 传 '); 
} 


plugin.done = function(){ 
console.1og( “文件 上 传 完 成 ”)j 
} 


document .body.appendChild( plugin ); 


return plugin; 


])(); 
第 二 步 ， 改 造 upload 构造 函数 ， 在 构造 函数 中 为 每 种 状态 子 类 都 创建 一 个 实例 对 象 : 


var Upload = function( fileName ){ 
this.plugin = plugin; 
this.fileName = fileName; 
this.button1 = null; 
this.button2 = null; 
this.signState = new SignState( this ); // 设置 初始 状态 为 waiting 
this.uploadingState = new UploadingState( this ); 
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this.pauseState = new PauseState( this ); 

this.doneState = new DoneState( this ); 

this.errorState = new ErrorState( this ); 

this.currState = this.signState; ”// 设置 当前 状态 
}; 


第 三 步 ，Upload.prototype.init 方法 无 需 改变 ,仍然 负责 往 页 面 中 创建 跟 上 传 流程 有 关 的 
DOM 节点 ， 并 开始 绑 定 按钮 的 事件 : 


Upload.prototype.init = function(){ 
var that = this; 


mn 


this.dom = document.createElement( 'div' ); 
this.dom.innerHTML = 
"<span> 文 件 名 称 :'+ this.fileName +'</span>\ 
<button data-action="button1"> 扫 描 中 </button>\ 
<button data-action="button2"> 删 除 </button>'; 


document.body.appendChild( this.dom ); 


this.button1 = this.dom.querySelector( '[data-action="button1"]" ); 
this.button2 = this.dom.querySelector( '[data-action="button2"]" ); 


this.bindEvent(); 
}; 
第 四 步 ， 负 责 具 体 的 按钮 事件 实现 ， 在 点 击 了 按钮 之 后 ，Context 并 不 做 任何 具体 的 操作 ， 
而 是 把 请 求 委托 给 当前 的 状态 类 来 执行 : 
Upload.prototype.bindEvent = function(){ 
var self = this; 


this.button1.onclick = function(){ 
self.currState.clickHandler1(); 
} 


this.button2.onclick = function(){ 
self.currState.clickHandler2(); 
} 


3 
第 四 步 中 的 代码 有 一 些 变化 ， 我 们 把 状态 对 应 的 逻辑 行为 放 在 Upload 类 中 : 


Upload.prototype.sign = function(){ 
this.plugin.sign(); 
this.currState = this.signState; 


局 


Upload.prototype.uploading = function(){ 
this.button1.innerHTML = ' 正 在 上 传 ， 点 击 暂 停 '; 
this.plugin.uploading(); 
this.currState = this.uploadingState; 

}; 


Upload.prototype.pause = function(){ 
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this.button1.innerHTML = ' 已 暂停 ， 点 击 继 续 上 传 '; 
this.plugin.pause(); 
this.currState = this.pauseState; 


}; 


Upload.prototype.done = function(){ 
this.button1.innerHTML = ' 上 传 完成 '; 
this.plugin.done(); 
this.currState = this.doneState; 


}; 


Upload.prototype.error = function(){ 
this.button1.innerHTML = ' 上 传 失败 '; 
this.currState = this.errorState; 


}; 


Upload.prototype.del = function(){ 
this.plugin.del(); 
this.dom.parentNode.removeChild( this.dom ); 
}; 
第 五 步 ， 工 作 略 显 乏 味 ， 我 们 要 编写 各 个 状态 类 的 实现 。 值 得 注意 的 是 ,我们 使 用 了 
StateFactory， 从 而 避免 因为 JavaScript 中 没有 抽象 类 所 带 来 的 问题 。 


var StateFactory = (function(){ 


var State = function(){}; 
State.prototype.clickHandler1 = function(){ 

throw new Error( ' 子 类 必须 重 写 父 类 的 clickHandler1 方法 ' ); 
} 


State.prototype.clickHandler2 = function(){ 
throw new Error( ' 子 类 必须 重 写 父 类 的 clickHandler2 方法 " ); 
} 
return function( param ){ 
var F = function( uploadobj ){ 
this.upload0bj = upload0bj; 
}; 
F.prototype = new State(); 
for ( var i in param ){ 
F.prototype[ i ] = param[ i ]; 
return F; 
} 
}) 0; 


var SignState = StateFactory({ 
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} 


和 


var 


地 


Var 


]); 


var 


1)3 


Var 


}); 


clickHandler1: function(){ 
console.log(' 扫 描 中 ， 点 击 无 效 ...'" ); 


clickHandler2: function(){ 
console.log( ' 文 件 正在 上 传 中 ， 不 能 删除 ' ); 
} 


UploadingState = StateFactory({ 

clickHandler1: function(){ 
this.upload0bj.pause(); 

}, 


clickHandler2: function(){ 
console.log( ' 文 件 正在 上 传 中 ， 不 能 删除 ' ); 
= 


PauseState = StateFactory({ 
clickHandler1: function(){ 

this.upload0bj.uploading(); 
}, 


clickHandler2: function(){ 
this.upload0bj.del(); 
} 


DoneState = StateFactory({ 
clickHandler1: function(){ 

console.log( ' 文 件 已 完成 上 传 ， 点 击 无 效 ' ); 
}), 


clickHandler2: function(){ 
this.upload0bj.del(); 
} 


ErrorState = StateFactory({ 
clickHandler1: function(){ 

console.log( ' 文 件 上 传 失败 ， 点 击 无 效 ' ); 
}), 


clickHandler2: function(){ 
this.upload0bj.del(); 
} 


最 后 是 测试 时 间 : 


Var 


upload0bj = new Upload( 'JavaScript 设计 模式 与 开发 实践 ); 


Uploadobj.init(); 


window.external.upload = function( state ){ 


uploadObj[ state ](); 


window.external.upload( 'sign' ); 
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setTimeout(function(){ 
window.external.upload( 'uploading' ); // 1 秒 后 开始 上 传 
}, 1000 ); 


setTimeout(function(){ 
window.external.upload( 'done' ); // 5 秒 后 上 传 完成 
}, 5000 ); 


16.6 ”状态 模式 的 优 缺 点 


到 这 里 我 们 已 经 学 习 了 两 个 状态 模式 的 例子 , 现在 是 时 候 来 总 结 状态 模式 的 优 缺 点 了 。 状 态 
模式 的 优点 如 下 。 
口 状态 模式 定义 了 状态 与 行为 之 间 的 关系 ， 并 将 它们 封装 在 一 个 类 里 。 通 过 增加 新 的 状态 
类 ， 很 容易 增加 新 的 状态 和 转换 。 
口 避免 Context 无 限 膨胀 ， 状 态 切 换 的 逻辑 被 分 布 在 状态 类 中 ， 也 去 掉 了 Context 中 原本 过 
多 的 条 件 分 支 。 
口 用 对 象 代替 字符 串 来 记录 当前 状态 ， 使 得 状态 的 切换 更 加 一 目 了 然 。 
口 Context 中 的 请 求 动 作 和 状态 类 中 封装 的 行为 可 以 非常 容易 地 独立 变化 而 互 不 影响 。 
状态 模式 的 缺点 是 会 在 系统 中 定义 许多 状态 类 ， 编 写 20 个 状态 类 是 一 项 枯燥 乏味 的 工作 ， 
而 且 系统 中 会 因此 而 增加 不 少 对 象 。 另 外 , 由 于 逻辑 分 散在 状态 类 中 ,虽然 避 开 了 不 受 欢迎 的 条 
件 分 支 语 句 ， 但 也 造成 了 逻辑 分 散 的 问题 ， 我 们 无 法 在 一 个 地 方 就 看 出 整个 状态 机 的 逻辑 。 


16.7 ”状态 模式 中 的 性 能 优化 点 


在 这 两 个 例子 中 , 我们 并 没有 太 多 地 从 性 能 方面 考虑 问题 , 实际 上 , 这 里 有 一 些 比较 大 的 优 
化 点 。 
口 有 两 种 选择 来 管理 state 对 象 的 创建 和 销毁 。 第 一 种 是 仅 当 state 对 象 被 需要 时 才 创 建 并 
随后 销毁 ， 另 一 种 是 一 开始 就 创建 好 所 有 的 状态 对 象 ， 并 且 始 终 不 销毁 它们 。 如 果 state 
对 象 比较 庞大 ， 可 以 用 第 一 种 方式 来 节省 内 存 ， 这 样 可 以 避免 创建 一 些 不 会 用 到 的 对 象 
并 及 时 地 回收 它们 。 但 如 果 状 态 的 改变 很 频繁 , 最 好 一 开始 就 把 这 些 state 对 象 都 创建 出 
来 ， 也 没有 必要 销毁 它们 ， 因 为 可 能 很 快 将 再 次 用 到 它们 。 
口 在 本 章 的 例子 中 ， 我 们 为 每 个 Context 对 象 都 创建 了 一 组 state 对 象 ， 实 际 上 这 些 state 
对 象 之 间 是 可 以 共享 的 ， 各 Context 对 象 可 以 共享 一 个 state 对 象 ， 这 也 是 享 元 模式 的 应 
用 场景 之 一 。 


16.8 ”状态 模式 和 策略 模式 的 关系 
状态 模式 和 策略 模式 像 一 对 双胞胎 ,它们 都 封装 了 一 系列 的 算法 或 者 行为 ,它们 的 类 图 看 起 
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来 几乎 一 模 一 样 ， 但 在 意图 上 有 很 大 不 同 ， 因 此 它们 是 两 种 凶 然 不 同 的 模式 。 


策略 模式 和 状态 模式 的 相同 点 是 ,它们 都 有 一 个 上 下 文 、 一 些 策 略 或 者 状态 类 ， 上 下 文 把 请 
求 委托 给 这 些 类 来 执行 。 

它们 之 间 的 区 别 是 策略 模式 中 的 各 个 策略 类 之 间 是 平等 又 平行 的 ， 它 们 之 间 没 有 任何 联系 ， 
所 以 客户 必须 熟知 这 些 策略 类 的 作用 ,以 便 客户 可 以 随时 主动 切换 算法 ; 而 在 状态 模式 中 ,状态 
和 状态 对 应 的 行为 是 早已 被 封装 好 的 ， 状 态 之 间 的 切换 也 早 被 规定 完成 ,“ 改 变 行为 ”这 件 事情 
发 生 在 状态 模式 内 部 。 对 客户 来 说 ， 并 不 需要 了 解 这 些 细节 。 这 正 是 状态 模式 的 作用 所 在 。 


16.9_ JavaScript 版 本 的 状态 机 


前 面 两 个 示例 都 是 模拟 传统 面向 对 象 语言 的 状态 模式 实现 , 我 们 为 每 种 状态 都 定义 一 个 状态 
子 类 ， 然 后 在 Context 中 持 有 这 些 状 态 对 象 的 引用 ， 以 便 把 currstate 设置 为 当前 的 状态 对 象 。 
状态 模式 是 状态 机 的 实现 之 一 ， 但 在 JavaScript 这 种 “无 类 ”语言 中 ， 没 有 规定 让 状态 对 象 
一 定 要 从 类 中 创建 而 来 。 另 外 一 点 ，JavaScript 可 以 非常 方便 地 使 用 委托 技术 ， 并 不 需要 事先 让 
一 个 对 象 持 有 男 一 个 对 象 。 下 面 的 状态 机 选择 了 通过 Function.prototype.call 方法 直接 把 请 求 委 
托 给 某 个 字面 量 对 象 来 执行 。 


下 面 改写 电灯 的 例子 ， 来 展示 这 种 更 加 轻巧 的 做 法 : 


var Light = function(){ 
this.currState = FSM.off; // 设置 当前 状态 
this.button = null; 

}; 


Light.prototype.init = function(){ 
var button = document.createElement( 'button' )， 
self = this; 


button.innerHTML = ' 已 关 灯 '; 
this.button = document.body.appendChild( button ); 


this.button.onclick = function(){ 
self.currState.buttonWaspressed.call( self ); // 把 请 求 委托 给 FSM 状态 机 
} 


js 


var FSM = { 
off: { 
buttonWasPressed: function(){ 
console.log( ' 关 灯 ' ); 
this.button.innerHTML = ' 下 一 次 按 我 是 开 灯 '; 
this.currState = FSM.on; 


on: { 
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buttonWasPressed: function(){ 
console.log(' 开 灯 ' ); 
this.button.innerHTML = ' 下 一 次 按 我 是 关 灯 '; 
this.currState = FSM.off; 


} 
中 


var light = new Light(); 
light.init(); 
接 下 来 尝试 另外 一 种 方法 , 即 利 用 下 面 的 delegate 函数 来 完成 这 个 状态 机 编写 。 这 是 面向 对 
象 设 计 和 闭 包 互 换 的 一 个 例子 , 前 者 把 变量 保存 为 对 象 的 属性 ,而 后 者 把 变量 封闭 在 闭 包 形 成 的 
环境 中 : 
var delegate = function( client, delegation ){ 
return { 


buttonWasPressed: function(){  ” // 将 客户 的 操作 委托 给 delegation 对 象 
return delegation.buttonWasPressed.apply( client, arguments ); 


} 
} 
}; 
var FSM = { 
off: { 
buttonWasPressed: function(){ 
console.log( ' 关 灯 ' ); 
this.button.innerHTML = ' 下 一 次 按 我 是 开 灯 '; 
this.currState = this.onState; 
} 
}), 
on: { 
buttonWasPressed: function(){ 
console.log(' 开 灯 ' ); 
this.button.innerHTML = ' 下 一 次 按 我 是 关 灯 '; 
this.currState = this.offState; 
je 
} 
}; 


var Light = function(){ 
this.offState = delegate( this, FSM.off ); 
this.onState = delegate( this, FSM.on ); 
this.currState = this.offState; // 设置 初始 状态 为 关闭 状态 
this.button = null; 
}; 


Light.prototype.init = function(){ 
var button = document.createElement( 'button' ), 
self = this; 
button.innerHTML = ' 已 关 灯 '; 
this.button = document.body.appendChild( button ); 
this.button.onclick = function(){ 
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self.currState.buttonWasPpressed(); 
} 
}; 


var light = new Light(); 
light.init(); 


16.10” 表 驱动 的 有 限 状态 机 


其 实 还 有 另外 一 种 实现 状态 机 的 方法 , 这 种 方法 的 核心 是 基于 表 了 驱动 的 。 我 们 可 以 在 表 中 很 
清楚 地 看 到 下 一 个 状态 是 由 当前 状态 和 行为 共同 决定 的 ,这 样 一 来 , 我们 就 可 以 在 表 中 查找 状态 ， 


而 不 必定 义 很 多 条 件 分 支 ， 如 图 16-6 所 示 。 
状态 转移 表 
当前 状态 一 条 件 | 状态 A 状态 B 状态 C 

条 件 xX 

条 件 Y a 状态 C 

条 件 Zz 
图 16-6 

刚好 GitHub 上 有 一 个 对 应 的 库 实 现 ， 通 过 这 个 库 ， 可 以 很 方便 地 创建 出 FSM : 


var fsm = StateMachine.create({ 
initial: "off '， 
events: [ 
{ name: 'buttonWasPressed', from: 'off', to: 'on' }, 
{ name: 'buttonWasPressed', from: 'on', to: 'off' } 


]， 
callbacks: { 
onbuttonWasPressed: function( event, from, to ){ 
console.log( arguments ); 
} 


}, 


error: function( eventName, from, to, args, errorCode, errorMessage ) { 
console.log( arguments ); // 从 一 种 状态 试图 切换 到 一 种 不 可 能 到 达 的 状态 的 时 候 
} 


}); 


button.onclick = function(){ 
fsm.buttonWaspressed(); 


} 


关于 这 个 库 的 更 多 内 容 这 里 不 再 蒙 述 ， 有 兴趣 的 同学 可 以 前 往 : https:// github.com/jakesgordon/ 


Javascript- state-machine 学 习 。 
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16.11 


实际 项 目 中 的 其 他 状态 机 


在 实际 开发 中 ,很 多 场景 都 可 以 用 状态 机 来 模拟 ,比如 一 个 下 拉 菜 单 在 hover 动作 下 有 显示 、 


悬浮 、 隐 藏 等 状态 ; 
击 、 防 御 、 跳 路 、 跌 倒 等 状态 。 


一 次 TCP 请 求 有 建立 连接 、 


状态 机 在 游戏 开发 中 也 有 着 广泛 的 用 途 


HN 乒 举 天 看 王 游戏 里 “游戏 主角 Ri 涯 十 动 
状态 之 间 既 互相 联系 又 互相 约束 。 比 如 Ryu 在 走动 的 过 程 中 如 果 被 攻击 ， 
攻击 也 不 能 防御 。 同 样 ，Ryu 也 不 能 在 跳跃 的 过 程 中 切换 


跌倒 状态 。 在 跌倒 状态 下 ，Ryu 既 不 能 

到 防御 状态 ， 但 是 可 以 进行 攻击 。 这 种 场景 就 很 适合 
var FSM = 
walk: { 


attack: function(){ 
console.1og(“ 攻 击 ' ); 

}, 

defense: function(){ 
console.log(' 防 御 ' ); 


}), 
jump: function(){ 
console.1og( “跳跃 ' ); 
} 
}), 


attack: { 
walk: function(){ 


监听 、 关 闭 等 状态 ; 


一 个 格斗 游戏 中 人 物 有 攻 


， 特 别 是 游戏 AI 的 逻辑 编写 。 在 我 曾经 开发 的 


攻击 、 防 御 、 跌 倒 、 


用 状态 机 来 描述 。 代 码 如 下 : 


console.1og( “攻击 的 时 候 不 能 行走 ); 


} 


defense: function(){ 


console.1log(' 攻 击 的 时 候 不 能 防御 ' ); 


}, 
jump: function(){ 


console.1og(“ 攻 击 的 时 候 不 能 跳跃 ' ); 


} 
} 
} 


小 结 


16.12 


过 几 个 例子 , 讲解 了 


式 一 开始 并 不 是 非常 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


状态 模式 在 实际 开发 中 的 应 
模式 之 一 。 实际 上 ， 通过 状态 模式 重 构 代 码 之 后 ,很 多 杂乱 无 章 的 代码 会 变 得 清晰 。 晤 
容易 理解 ， 但 我 们 有 必须 去 好 好 掌握 这 种 设计 模式 。 


跳跃 等 多 种 状态 
就 会 由 走 动 状 态 切换 为 


[si 


= 


。 这 些 


用 。 状态 模式 也 许 是 被 大 家 低估 的 


然 状 态 模 


第 17 草 


适配器 模式 


适配器 模式 的 作用 是 解决 两 个 软件 实体 间 的 接口 不 兼容 的 问题 。 使 用 适配器 模式 之 后 ,原本 
由 于 接口 不 兼容 而 不 能 工作 的 两 个 软件 实体 可 以 一 起 工作 。 

适配器 的 别名 是 包装 器 ( wrapper )， 这 是 一 个 相对 简单 的 模式 。 在 程序 开发 中 有 许多 这 样 的 
场景 : 当 我 们 试图 调用 模块 或 者 对 象 的 某 个 接口 时 , 却 发 现 这 个 接口 的 格式 并 不 符合 目前 的 需求 。 
这 时 候 有 两 种 解决 办 法 ,第 一 种 是 修改 原来 的 接口 实现 , 但 如 果 原 来 的 模块 很 复杂 , 或 者 我 们 拿 
到 的 模块 是 一 段 别 人 编写 的 经 过 压缩 的 代码 , 修改 原 接口 就 显得 不 太 现实 了 。 第 二 种 办 法 是 创建 
一 个 适配器 ， 将 原 接口 转换 为 客户 希望 的 男 一 个 接口 ， 客 户 只 需要 和 适配器 打交道 。 


17.1 现实 中 的 适配器 
适 配 顺 在 现实 生活 的 应 用 非常 广泛 ， 接 下 来 我 们 来 看 几 个 现实 生活 中 的 适 配 需 模 式 。 
1. 港 式 插头 转换 器 
港 式 的 电器 插头 比 大 陆 的 电器 插头 体积 要 大 一 些 。 如 果 从 香港 买 了 一 个 Mac book， 我 们 


会 发 现 充 电器 无 法 搬 在 家 里 的 插座 上 ， 为 此 而 改造 家 里 的 插座 显然 不 方便 ， 所 以 我 们 需要 一 个 
适 配 郁 : 
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2. 电源 适配器 

Mac book 电池 支持 的 电压 是 20V， 我 们 日 常生 活 中 的 交流 电压 一 般 是 220V。 除 了 我 们 了 解 
的 220V 交流 电压 ， 日 本 和 韩国 的 交流 电压 大 多 是 100V， 而 英国 和 澳大利亚 的 是 240V。 笔 记 本 
电脑 的 电源 适配器 就 承担 了 转换 电压 的 作用 ， 电 源 适 配器 使 笔记 本 电脑 在 100V~240V 的 电压 之 
内 都 能 正常 工作 ， 这 也 是 它 为 什么 被 称 为 电源 “ 适 配 右 ”的 原因 。 


3. USB 转 接口 

在 以 前 的 电脑 上 ，PS2 接口 是 连接 鼠标 、 键 盘 等 其 他 外 部 设备 的 标准 接口 。 但 随 着 技术 的 发 
展 ， 越 来 越 多 的 电脑 开始 放弃 了 PS2 接口 ， 转 而 仅 文 持 USB 接口 。 所 以 那些 过 去 生产 出 来 的 只 
拥有 PS2 接口 的 鼠标 、 键 盘 ,游戏 手柄 等 ,需要 一 个 USB 转 接口 才能 继续 正常 工作 ,这 是 PS2-USB 
适 配 带 诞生 的 原因 。 


17.2 ”适配器 模式 的 应 用 


如 果 现 有 的 接口 已 经 能 够 正常 工作 , 那 我 们 就 永远 不 会 用 上 适配器 模式 。 适 配 需 模式 是 一 种 
“亡羊补牢 ”的 模式 ,没有 人 会 在 程序 的 设计 之 初 就 使 用 它 。 因 为 没有 人 可 以 完全 预料 到 未 来 的 
事情 ,也许 现在 好 好 工作 的 接口 , 未 来 的 某 天 却 不 再 适用 于 新 系统 , 那么 我 们 可 以 用 适配器 模式 
把 旧 接 口 包装 成 一 个 新 的 接口 ， 使 它 继续 保持 生命 力 。 比 如 在 JSON 格式 流行 之 前 ， 很 多 cgi 返 
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回 的 都 是 XML 格式 的 数据 ， 如 果 今 天 仍然 想 继续 使 用 这 些 接口 ， 显 然 我 们 可 以 创造 一 
XML-JSON 的 适配器 。 


下 面 这 个 实例 可 以 帮助 我 们 深刻 了 解 适 配 带 模 式 。 


回忆 1.3 节 中 多 态 的 例子 ， 当 我 们 向 googleMap 和 baiduMap 都 发 出 “显示 ”请 求 时 ，googleMap 
和 baiduMap 分 别 以 各 自 的 方式 在 页 面 中 展现 了 地 图 : 
var googleMap = { 


show: function(){ 
console.1og(“ 开 始 泻 染 谷歌 地 图 ' ); 
} 


var baiduMap = { 
show: function(){ 
console.1og(“ 开 始 泻 染 百度 地 图 ' ); 
} 


}; 


var renderMap = function( map ){ 
if ( map.show instanceof Function ){ 
map. show(); 


}; 


renderMap( googleMap ); // 输出 : 开始 演 染 谷歌 地 图 
renderMap( baiduMap ); // 输出 : 开始 泻 染 百度 地 图 


这 段 程序 得 以 顺利 运行 的 关键 是 googleMap 和 baiduMap 提供 了 一 致 的 show 方 法 , 但 第 三 方 的 
接口 方法 并 不 在 我 们 自己 的 控制 范围 之 内 ， 假 如 baiduMap 提供 的 显示 地 图 的 方法 不 叫 show 而 叫 
display 呢 ? 

baiduMap 这 个 对 象 来 源 于 第 三 方 ， 正 常情 况 下 我 们 都 不 应 该 去 改动 它 。 此 时 我 们 可 以 通过 增 
加 baiduMapAdapter 来 解决 问题 : 


var googleMap = { 
show: function(){ 
console.1og( “开始 泻 染 谷歌 地 图 ” ); 
} 
}; 


var baiduMap = { 
display: function(){ 
console.1log(' 开 始 演 染 百度 地 图 ' ); 
} 


var baiduMapAdapter = { 
show: function(){ 
return baiduMap.display(); 
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} 
}; 


renderMap( googleMap ); // 输出 : 开始 泻 染 谷歌 地 图 
renderMap( baiduMapAdapter ); // 输出 : 开始 演 染 百度 地 图 


再 来 看 看 男 外 一 个 例子 。 假设 我 们 正在 编写 一 个 演 染 广东 省 地 图 的 页 面 。 目 前 从 第 三 方 资源 
里 获得 了 广东 省 的 所 有 城市 以 及 它们 所 对 应 的 ID， 并 且 成 功 地 演 染 到 页 面 中 : 


var getGuangdongCity = function(){ 
var guangdongCity = [ 
{ 


name: 'shenzhen', 
id: 11， 

}, { 
name: 'guangzhou', 
id: 12， 


]; 
return guangdongCity; 
}; 
var render = function( fn ){ 
console.1og( “开始 泻 染 广 东 省 地 图 ' ); 
document .wiite( JSON.stringify( fn() ) ); 
}; 


render( getGuangdongCity ); 

利用 这 些 数据 , 我 们 编写 完成 了 整个 页 面 , 并 且 在 线 上 稳定 地 运行 了 一 段 时 间 。 但 后 来 发 现 
这 些 数据 不 太 可 靠 , 里 面 还 缺少 很 多 城市 。 于 是 我 们 又 在 网 上 找到 了 男 外 一 些 数据 资源 , 这 次 的 
数据 更 加 全 面 ， 但 遗憾 的 是 ， 数 据 结构 和 正 运行 在 项 目 中 的 并 不 一 致 。 新 的 数据 结构 如 下 : 


var guangdongCity = { 
shenzhen: 11， 
guangzhou: 12， 
zhuhai: 13 


}; 
除了 大 动 干戈 地 改写 演 染 页 面 的 前 端 代码 之 外 , 另外 一 种 更 轻便 的 解决 方式 就 是 新 增 一 个 数 
据 格式 转换 的 适配器 : 


var getGuangdongCity = function(){ 
var guangdongCity = [ 
{ 


name: 'shenzhen', 
id: 11， 

}, { 
name: 'guangzhou', 
id: 12， 


} 
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return guangdongCity; 


}; 


var render = function( fn ){ 
console.1og( “开始 泻 染 广 东 省 地 图 ' ); 
document .wiite( JSON.stringify( fn() ) ); 


}; 


var addressAdapter = function( oldAddressfn ){ 


var address = {}, 
oldAddress = oldAddressfn(); 


for ( var i = 0, c; c¢ = oldAddress[ i++ ]; ){ 
address[ c.name ] = c.id; 


} 


return function(){ 
return address; 


} 
}; 


render( addressAdapter( getGuangdongCity ) ); 


那么 接 下 来 需要 做 的 ， 就 是 把 代码 中 调用 getGuangdongCity 的 地 方 ， 用 经 过 addressAdapter 


适配器 转换 之 后 的 新 函数 来 代替 。 


17.3 ”小结 


适配器 模式 是 一 对 相对 简单 的 模式 。 在 本 书 提 到 的 设计 模式 中 , 有 一 些 模式 跟 适 配器 模式 的 
结构 非常 相似 ， 比 如 装饰 者 模式 、 代 理 模 式 和 外 观 模式 ( 参见 第 19 章 )。 这 几 种 模式 都 属于 “ 包 


装 模 式 ”， 都 是 上 


口 装饰 者 模式 和 代理 模式 也 不 会 改变 原 有 对 象 的 接口 ， 但 装 
增加 功能 。 装 饰 者 模式 常常 形成 一 条 长 的 装饰 链 ， 而 适配器 模式 通常 只 包装 一 次 。 代 理 


模式 是 为 了 控 


个 对 象 来 包装 另 一 个 对 象 。 区 别 它 1 


门 的 关键 仍然 是 模式 的 意图 。 
口 适 配 囊 模式 主要 用 来 解决 两 个 已 有 接口 之 间 不 匹配 的 问题 ， 它 不 考虑 这 些 接口 是 怎样 实 

现 的 ， 也 不 考虑 它们 将 来 可 能 会 如 何 演化 。 适 配 需 模 式 不 需要 改变 已 有 的 接口 ， 就 能 够 
使 它们 协同 作用 。 


观 模式 最 显著 的 特点 是 定义 了 一 个 新 的 接口 。 
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布 者 模式 的 作用 是 为 了 给 对 象 


别 对 对 和 象 的 访问 ， 通 常 也 只 包装 一 次 。 
口 外 观 模式 的 作用 倒是 和 适配器 比较 相似 ， 有 人 把 外 观 模式 看 成 一 组 对 象 的 适配器 ， 


第 三 部 分 
设计 原则 和 编程 技巧 


目前 ， 我 们 已 经 学 习 了 几乎 所 有 常用 的 JavaScript 设 计 模 式 。 在 这 一 部 分 ， 我们 将 学 习 一 些 
面向 对 象 的 设计 原则 ， 可 以 说 每 种 设计 模式 都 是 为 了 让 代码 迎合 其 中 一 个 或 多 个 原则 而 出 现 的 ， 
它们 本 身 已 经 融入 了 设计 模式 之 中 ， 给 面向 对 象 编程 指明 了 方向 。 

前 辈 总 结 的 这 些 设计 原则 通常 指 的 是 单一 职责 原则 、 里 氏 替 换 原 则 、 依 赖 倒置 原则 、 接 口 隔 
离 原 则 、 合 成 复 用 原则 和 最 少 知识 原则 。 

在 本 部 分 的 第 18 章 到 第 20 章 ， 我 们 挑选 了 几 个 适合 JavaScript 开发 的 设计 原则 加 以 说 明 ， 
第 21 章 主要 讲解 接口 和 面向 接口 编程 在 JavaScript 开发 中 的 意义 ， 第 22 章 则 提供 了 一 些 平时 常 
见 和 经 典 的 代码 重 构 技巧 ， 来 帮助 我 们 更 好 地 改进 自己 的 代码 。 
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就 一 个 类 而 言 ， 应 该 仅 有 一 个 引起 它 变化 的 原因 。 在 JavaScript 中 ， 需 要 用 到 类 的 场景 并 不 
太 多 , 单一 职责 原则 更 多 地 是 被 运用 在 对 象 或 者 方法 级 别 上 , 因此 本 节 我 们 的 讨论 大 多 基于 对 象 
和 方法 。 

单一 职责 原则 〈SRP ) 的 职责 被 定义 为 “引起 变化 的 原因 "。 如 果 我 们 有 两 个 动机 去 改写 一 
个 方法 ,那么 这 个 方法 就 具有 两 个 职责 。 每 个 职责 都 是 变化 的 一 个 轴线 ， 如 果 一 个 方法 承担 了 过 
多 的 职责 ， 那 么 在 需求 的 变迁 过 程 中 ， 需 要 改写 这 个 方法 的 可 能 性 就 越 大 。 

此 时 , 这 个 方法 通常 是 一 个 不 稳定 的 方法 , 修改 代码 总 是 一 件 危 险 的 事情 , 特别 是 当 两 个 职 
耦合 在 一 起 的 时 候 ， 一 个 职责 发 生变 化 可 能 会 影响 到 其 他 职责 的 实现 ， 造 成 意 想 不 到 的 破坏 ， 
耦合 性 得 到 的 是 低 内 聚 和 脆弱 的 设计 。 
因此 ，SRP 原则 体现 为 : 一 个 对 象 (方法 ) 只 做 一 件 事 情 。 


18.1 设计 模式 中 的 SRP 原则 

SRP 原则 在 很 多 设计 模式 中 都 有 着 广泛 的 运用 ,例如 代理 模式 、 迭 代 器 模式 、 单 例 模 式 和 装 
饰 者 模式 。 

1. 代理 模式 

我 们 在 第 6 章 中 已 经 见 过 这 个 图 片 预 加 载 的 例子 了 。 通过 增加 虚拟 代理 的 方式 , 把 预 加 载 图 
片 的 职责 放 到 代理 对 象 中 ， 而 本 体 仅仅 负责 往 页 面 中 添加 img 标签 ， 这 也 是 它 最 原始 的 职责 。 

myImage 负责 往 页 面 中 添加 img 标签 : 


这 泪 
2 沙 


var myImage = (function(){ 
var imgNode = document.createElement( 'img' ); 
document .body.appendChild( imgNode ); 
return { 
setSrc: function( src ){ 
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imgNode.src = src; 


} 
} 
])(); 
proxyImage 负责 预 加 载 图 片 ， 并 在 预 加 载 完成 之 后 把 请 求 交 给 本 体 myImage: 
var proxyImage = (function(){ 
var img = new Image; 


img.onload = function(){ 
myImage.setSrc( this.src ); 


} 
return { 
setSrc: function( src ){ 
myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' ); 
img.src = src; 
} 
DO; 


proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/000GGDysoyAoNk.jpg'" ); 


把 添加 img 标签 的 功能 和 预 加 载 图片 的 职责 分 开放 到 两 个 对 象 中 , 这 两 个 对 象 各 自 都 只 有 一 
个 被 修改 的 动机 。 在 它们 各 自发 生 改 变 的 时 候 ， 也 不 会 影响 另外 的 对 象 。 

2. 迭代 器 模式 

我 们 有 这 样 一 段 代 码 ， 先 遍历 一 个 集合 ， 然 后 往 页 面 中 添加 一 些 div， 这 些 div 的 innerHTML 
分 别 对 应 集合 里 的 元 素 : 

var appendDiv = function( data ){ 
for ( var i = 0, 1 = data.length; i < 1; i+t+ ){ 

var div = document.createElement( 'div' ); 


div.innerHTML = data[ i ]; 
document.body.appendChild( div ); 


} 
}; 


appendDiv( [ 1, 2, 3, 4, 5, 6 ] ); 

这 其 实 是 一 段 很 常见 的 代码 ， 经 常用 于 ajax 请 求 之 后 ， 在 回调 函数 中 遍历 ajax 请 求 返回 的 
数据 ， 然 后 在 页 面 中 浑 染 节点 。 

appendDiv 函数 本 来 只 是 负责 泻 染 数据 ， 但 是 在 这 里 它 还 承担 了 遍历 聚合 对 象 data 的 职责 。 
我 们 想象 一 下 ， 如 果 有 一 天 cgi 返 回 的 data 数据 格式 从 array 变 成 了 object, 那 我 们 遍历 data 的 
代码 就 会 出 现 问题 ， 必 须 改 成 for ( var i in data ) 的 方式 ， 这 时 候 必须 去 修改 appendDiv 里 的 
代码 ， 和 否则 因为 遍历 方式 的 改变 ， 导 致 不 能 顺利 往 页 面 中 添加 div 节点 。 

我 们 有 必要 把 遍历 data 的 职责 提取 出 来 ， 这 正 是 迭代 器 模式 的 意义 ， 迭 代 器 模式 提供 了 一 
种 方法 来 访问 聚合 对 象 ， 而 不 用 暴露 这 个 对 象 的 内 部 表示 。 
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当 把 迭代 聚合 对 象 的 职责 单独 封装 在 each 函数 中 后 ， 即 使 以 后 还 要 增加 新 的 迭代 方式 ,我 


们 只 需要 修改 each 函数 即 可 ，appendDiv 函数 不 会 受到 牵连 ， 代 码 如 下 ; 


var each = function( obj, callback ) { 
var value, 
i = 0， 
length = obj.length, 
isArray = isArraylike( obj ); // isArraylike 函数 未 实现 ， 可 以 翻阅 jQuery 源 代码 
if ( isArray ) { // 迭代 类 数组 
for ( ; i < length; i++ ) { 
callback.call( obj[ i ], i, obj[ i ] ); 


} 
} else { 
for (iinobj ){ // 迭代 object 对 象 
value = callback.call( obj[ i ], i, obj[ i ] ); 
} 
} 


return obj; 
}; 


var appendDiv = function( data ){ 
each( data, function( i, n ){ 
var div = document.createElement( 'div' ); 
div.innerHTML = n; 
document .body.appendChild( div ); 
]); 
}; 


appendDiv( [ 1, 2, 3, 4, 5, 6 ] ); 
appendDiv({a:1,b:2,c:3,d:4} ); 
3. 单 例 模 式 


第 4 章 曾 实现 过 一 个 惰性 单 例 ， 最 开始 的 代码 是 这 样 的 : 


var createLoginLayer = (function(){ 
var div; 
return function(){ 
if ( ldiv ){ 
div = document.createElement( 'div' ); 
div.innerHTML = ' 我 是 登录 浮 窗 '; 
div.style.display = 'none'; 
document.body.appendChild( div ); 
} 
return div; 
} 
])(); 
现在 我 们 把 管理 单 例 的 职责 和 创建 登录 浮 窗 的 职责 分 别 封装 在 两 个 方法 里 , 这 两 个 方法 可 以 


独立 变化 而 互 不 影响 ， 当 它们 连接 在 一 起 的 时 候 , 就 完成 了 创建 唯一 登录 浮 窗 的 功能 ,下面 的 代 


码 显 然 是 更 好 的 做 法 : 
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var getSingle = function( fn ){  ”// 获取 单 例 
var result; 
return function(){ 
return result || ( result = fn .apply(this, arguments ) ); 


} 
}; 
var createLoginLayer = function(){ // 创建 登录 浮 窗 
var div = document.createElement( 'div' ); 
div.innerHTML = ' 我 是 登录 浮 窗 '; 
document .body.appendChild( div ); 
return div; 
}; 


var createSingleLoginLayer = getSingle( createLoginLayer ); 


var loginLayer1 = createSingleLoginLayer(); 
var loginLayer2 = createSingleLoginLayer(); 


alert ( loginLayer1 === loginLayer2 ); // 输出 : true 


4. 装饰 者 模式 
使 用 装饰 者 模式 的 时 候 , 我 们 通常 让 类 或 者 对 象 一 开始 只 具有 一 些 基础 的 职责 , 更 多 的 职责 


在 代码 运行 时 被 动态 装饰 到 对 象 上 面 。 装 饰 者 模式 可 以 为 对 象 动 态 增加 职责 , 从 另 一 个 角度 来 看 ， 
这 也 是 分 离职 责 的 一 种 方式 。 


下 面 是 第 15 章 曾 提 到 的 例子 ， 我 们 把 数据 上 报 的 功能 单独 放 在 一 个 函数 里 ， 然 后 把 这 个 也 


数 动态 装饰 到 业务 函数 上 面 : 


<html> 
<body> 
<button tag="login” id="button"> 点 击 打开 登录 浮 层 </button> 
</body> 
<script> 


Function.prototype.after = function( afterfn ){ 
var _ self = this; 
return function(){ 
var ret = _self.apply( this, arguments ); 
afterfn.apply( this, arguments ); 
return ret; 
} 
}; 


var showLogin = function(){ 
console.log( ' 打 开 登 录 浮 层 ' ); 
}; 


var log = function(){ 
console.1log( “上 报 标签 为 : ' + this.getAttribute( 'tag'" ) ); 
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所 


document .getElementById( 'button' ).onclick = showLogin.after( log ); 
// 打开 登录 浮 层 之 后 上 报 数据 


</script> 
</html> 


SRP 原则 的 应 用 难点 就 是 如 何 去 分 离职 责 ， 下 面 的 小 节 我 们 将 开始 讨论 这 点 。 


18.2” 何 时 应 该 分 离职 责 


SRP 原则 是 所 有 原则 中 最 简单 也 是 最 难 正 确 运 用 的 原则 之 一 。 

要 明确 的 是 ， 并 不 是 所 有 的 职责 都 应 该 一 一 分 离 。 

一 方面 ， 如 果 随 着 需求 的 变化 ， 有 两 个 职责 总 是 同时 变化 ， 那 就 不 必 分 离 他 们 。 比 如 在 ajax 
请 求 的 时 候 ， 创 建 xhr 对 象 和 发 送 xhr 请 求 几 乎 总 是 在 一 起 的 ， 那么 创建 xhr 对 象 的 职责 和 发 送 
xhr 请 求 的 职责 就 没有 必要 分 开 。 

另 一 方面 , 职责 的 变化 轴线 仅 当 它们 确定 会 发 生变 化 时 才 具 有 意义 ,即使 两 个 职责 已 经 被 耦 
合 在 一 起 , 但 它们 还 没有 发 生 改 变 的 征兆 ,那么 也 许 没有 必要 主动 分 离 它 们 , 在 代码 需要 重 构 的 
时 候 再 进行 分 离 也 不 迟 。 


18.3 违反 SRP 原则 


在 人 的 常规 思维 中 , 总 是 习惯 性 地 把 一 组 相关 的 行为 放 到 一 起 ,如 何 正确 地 分 离职 责 不 是 一 
件 容 易 的 事情 。 

我 们 也 许 从 来 没有 考虑 过 如 何 分 离职 责 ， 但 这 并 不 妨碍 我 们 编写 代码 完成 需求 。 对 于 SRP 
原则 ， 许 多 专家 委婉 地 表示 “This is sometimes hard to see.”。 

一 方面 , 我 们 受 设计 原则 的 指导 , 另 一 方面 , 我 们 未 必要 在 任何 时 候 都 一 成 不 变 地 遵守 原则 。 
在 实际 开发 中 ， 因 为 种 种 原因 违反 SRP 的 情况 并 不 少见 。 比 如 jQuery 的 attr 等 方法 ， 就 是 明显 
违反 SRP 原则 的 做 法 。jQuery 的 attr 是 个 非常 庞大 的 方法 ， 既 负责 赋值 ， 又 负责 取 值 ， 这 对 于 
jQuery 的 维护 者 来 说 ， 会 带 来 一 些 困 难 ， 但 对 于 jQuery 的 用 户 来 说 ， 却 简化 了 用 户 的 使 用 。 

在 方便 性 与 稳定 性 之 间 要 有 一 些 取舍 。 具 体 是 选择 方便 性 还 是 稳定 性 ， 并 没有 标准 答案 ,而 
是 要 取决 于 具体 的 应 用 环境 。 比 如 如 果 一 个 电视 机 内 置 了 DVD 机 ， 当 电视 机 坏 了 的 时 候 ，DVD 
机 也 没 法 正常 使 用 ， 那 么 一 个 DVD 发 烧 友 通常 不 会 选择 这 样 的 电视 机 。 但 如 果 我 们 的 客厅 本 来 
就 小 得 夸张 ， 或 者 更 在 意 DVD 在 使 用 上 的 方便 ， 那 让 电视 机 和 DVD 机 耦合 在 一 起 就 是 更 好 的 
选择 。 
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18.4 ”SRP 原则 的 优 缺 点 


SRP 原则 的 优点 是 降低 了 单个 类 或 者 对 象 的 复杂 度 ， 按 照 职 责 把 对 象 分 解 成 更 小 的 粒度 ， 
这 有 助 于 代码 的 复 用 ， 也 有 利于 进行 单元 测试 。 当 一 个 职责 需要 变更 的 时 候 ， 不 会 影响 到 其 他 
的 职责 。 


但 SRP 原则 也 有 一 些 缺 点 ， 最 明显 的 是 会 增加 编写 代码 的 复杂 度 。 当 我 们 按照 职责 把 对 象 
分 解 成 更 小 的 粒度 之 后 ， 实 际 上 也 增 大 了 这 些 对 象 之 间 相 互联 系 的 难度 。 
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最 少 知 识 原则 (LKP ) 说 的 是 一 个 软件 实体 应 当 尽 可 能 少 地 与 其 他 实体 发 生 相 互 作用 。 这 
里 的 软件 实体 是 一 个 广义 的 概念 ， 不 仅 包括 对 象 ， 还 包括 系统 、 类 、 模 块 、 函 数 、 变 量 等 。 本 
节 我 们 主要 针对 对 象 来 说 明 这 个 原则 ， 下 面 引 用 《面向 对 象 设计 原理 与 模式 》 一 书 中 的 例子 来 
解释 最 少 知识 原则 : 

某 军 队 中 的 将 军需 要 挖掘 一 些 散 兵 坑 。 下 面 是 完成 任务 的 一 种 方式 : 将 军 可 以 通知 

上 校 让 他 叫 来 少校 ， 然后 让 少校 找 玉 上尉 ， 并 让 上 尉 通知 一 个 军士 ,最 后 军士 唤 来 一 个 

士兵 ， 然 后 命令 士兵 挖掘 一 些 散 兵 坑 。 

这 种 方式 十 分 荒 廖 ， 不 是 吗 ? 不 过 ， 我 们 还 是 先 来 看 一 下 这 个 过 程 的 等 价 代码 : 

gerneral.getColonel( c ).getMajor( m ) .getCaptain( c ) .getSergeant( s ) .getpPrivate( p ).digFoxhole(); 

让 代码 通过 这 么 长 的 消息 链 才能 完成 一 个 任务 , 这 就 像 让 将 军 通 过 那么 多 繁琐 的 步 又 才能 命 
令 别 人 挖掘 散 兵 坑 一 样 荒 雇 ! 而 且 ， 这 条 链 中 任何 一 个 对 象 的 改动 都 会 影响 整 条 链 的 结果 。 

最 有 可 能 的 是 , 将 军 自己 根本 就 不 会 考虑 挖 散 兵 坑 这 样 的 细节 信息 。 但 是 如 果 将 军 真 的 考虑 
了 这 个 问题 的 话 ， 他 一 定 会 通知 某 个 军官 :“ 我 不 关心 这 个 工作 如 何 完成 ， 但 是 你 得 命令 人 去 挖 
散 兵 坑 。” 


19.1 减少 对 象 之 间 的 联系 


单一 职责 原则 指导 我 们 把 对 象 划分 成 较 小 的 粒度 ， 这 可 以 提高 对 象 的 可 复 用 性 。 但 越 来 越 
多 的 对 象 之 间 可 能 会 产生 错综复杂 的 联系 ， 如 果 修 改 了 其 中 一 个 对 象 ， 很 可 能 会 影响 到 跟 它 相 
互 引 用 的 其 他 对 象 。 对 象 和 对 象 耦合 在 一 起 ， 有 可 能 会 降低 它们 的 可 复 用 性 。 在 程序 中 ， 对 象 
的 “朋友 ” 太 多 并 不 是 一 件 好 事 ,“ 城 门 失火 ， 殊 及 池 鱼 ”和 “一 人 犯法 ,株连 九族 ”的 故事 
时 有 发 生 。 
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最 少 知识 原则 要 求 我 们 在 设计 程序 时 , 应 当 尽 量 减少 对 象 之 间 的 交互 。 如 果 两 个 对 象 之 间 不 
必 彼 此 直接 通信 , 那么 这 两 个 对 象 就 不 要 发 生 直接 的 相互 联系 。 常 见 的 做 法 是 引入 一 个 第 三 者 对 
象 , 来 承担 这 些 对 象 之 间 的 通信 作用 。 如 果 一 些 对 象 需要 向 另 一 些 对 象 发 起 请 求 ,可 以 通过 第 三 
者 对 象 来 转发 这 些 请 求 。 

19.2 ”设计 模式 中 的 最 少 知识 原则 

最 少 知识 原则 在 设计 模式 中 体现 得 最 多 的 地 方 是 中 介 者 模式 和 外 观 模式 , 下面 我 们 分 别 进行 
介绍 。 

1. 中 介 者 模式 

在 第 14 章 我 们 曾 讲 过 一 个 博彩 公司 的 例子 。 

在 世界 杯 期 间 购买 足球 彩票 , 如果 没有 博彩 公司 作为 中 介 , 上 千 万 的 人 一 起 计算 赔 率 和 输 启 
绝对 是 不 可 能 的 事情 。 博彩 公司 作为 中 介 , 每 个 人 都 只 和 博彩 公司 发 生 关联 ,博彩 公司 会 根据 所 
有 人 的 投注 情况 计算 好 赔 率 ， 彩 民 们 说 了 钱 就 从 博彩 公司 拿 ， 输 了 钱 就 赔 给 博彩 公司 。 

中 介 者 模式 很 好 地 体现 了 最 少 知识 原则 。 通过 增加 一 个 中 介 者 对 象 , 让 所 有 的 相关 对 象 都 通 


过 中 介 者 对 象 来 通信 ， 而 不 是 互相 引用 。 所 以 ， 当 一 个 对 象 发 生 改 变 时 ， 只 需要 通知 中 介 者 对 象 
即 可 。 


2. 外 观 模式 


EC [DAN 
CITI 5 ) 
~ 


gr eo 
ec 


我 们 在 第 二 部 分 没有 提 到 外 观 模式 ， 是 因为 外 观 模式 在 JavaScript 中 的 使 用 场景 并 不 多 。 外 
观 模式 主要 是 为 子 系统 中 的 一 组 接口 提供 一 个 一 致 的 界面 ， 外 观 模式 定义 了 一 个 高 层 接 口 ， 这 个 
接口 使 子 系统 更 加 容易 使 用 ， 如 网 19-1 所 示 。 
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外 观 模式 的 作用 是 对 客户 屏蔽 一 组 子 系统 的 复杂 性 。 外 观 模式 对 客户 提供 一 个 简单 易 用 的 高 
层 接口 , 高 层 接口 会 把 客户 的 请 求 转发 给 子 系统 来 完成 具体 的 功能 实现 。 大 多 数 客户 都 可 以 通过 
请 求 外 观 接 口 来 达到 访问 子 系统 的 目的 。 但 在 一 段 使 用 了 外 观 模式 的 程序 中 , 请 求 外 观 并 不 是 强 
制 的 。 如 果 外 观 不 能 满足 客户 的 个 性 化 需求 ， 那 么 客户 也 可 以 选择 越过 外 观 来 直接 访问 子 系统 。 

拿 全 自动 洗衣 机 的 一 键 洗衣 按钮 举例 , 这 个 一 键 洗衣 按钮 就 是 一 个 外 观 。 如果 是 老式 洗衣 机 ， 
客户 要 手动 选择 浸泡 、 洗 家、 漂洗 、 脱 水 这 4 个 步骤 。 如 果 这 种 洗衣 机 被 淘汰 了 ， 新 式 洗 衣 机 的 
漂洗 方式 发 生 了 改变 , 那 我 们 还 得 学 习 新 的 漂洗 方式 。 而 全 自动 洗衣 机 的 好 处 很 明显 , 不 管 洗衣 
机 内 部 如 何 进化 , 客户 要 操作 的 ,始终 只 是 一 个 一 键 洗衣 的 按钮 。 这 个 按钮 就 是 为 一 组 子 系统 所 
创建 的 外 观 。 但 如 果 一 键 洗衣 程序 设 定 的 默认 漂洗 时 间 是 20 分 钟 ， 而 客户 希望 这 个 漂洗 时 间 是 
30 分 钟 ， 那 么 客户 自然 可 以 选择 越过 一 键 洗衣 程序 ， 自 己 手动 来 控制 这 些 “ 子 系统 ”运转 。 

外 观 模式 容易 跟 普 通 的 封装 实现 混 消 。 这 两 者 都 封装 了 一 些 事物 , 但 外 观 模式 的 关键 是 定义 

个 高 层 接口 去 封装 一 组 “ 子 系统 ”。 子 系统 在 C++ 或 者 Java 中 指 的 是 一 组 类 的 集合 ， 这 些 类 相 
互 协作 可 以 组 成 系统 中 一 个 相对 独立 的 部 分 。 在 JavaScript 中 我 们 通常 不 会 过 多 地 考虑 “类 ”, 如 
果 将 外 观 模式 映射 到 JavaScript 中 ， 这 个 子 系统 至 少 应 该 指 的 是 一 组 函数 的 集合 。 

最 简单 的 外 观 模式 应 该 是 类 似 下 面 的 代码 : 


var A = function(){ 
a1(); 


a2(); 


var B = function(){ 
b1(); 
b2(); 

} 


var facade = function(){ 


facade(); 
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许多 JavaScript 设计 模式 的 图 书 或 者 文章 喜欢 把 jQuery 的 $.ajax 函数 当 作 外 观 模式 的 实现 ， 
这 是 不 合适 的 。 如 果 $.ajax 函数 属于 外 观 模式 ， 那 几乎 所 有 的 函数 都 可 以 被 称 为 “外 观 模式 ”。 
问题 是 我 们 根本 没有 办 法 越过 $.ajax“ 外 观 ” 去 直接 使 用 该 函数 中 的 某 一 段 语句 。 

现在 再 来 看 看 外 观 模式 和 最 少 知识 原则 之 间 的 关系 。 外 观 模式 的 作用 主要 有 两 点 。 
口 为 一 组 子 系统 提供 一 个 简单 便利 的 访问 人 口 。 
口 隔离 客户 与 复杂 子 系统 之 间 的 联系 ， 客 户 不 用 去 了 解 子 系统 的 细节 。 


从 第 二 点 来 ， 外 观 模 式 是 符合 最 少 知识 原则 的 。 比 如 全 自动 洗衣 机 的 一 键 洗衣 按钮 ， 隔 开 了 
客户 和 浸泡 、 洗衣、 漂洗 、 脱 水 这 些 子 系统 的 直接 联系 , 客户 不 用 去 了 解 这 些 子 系统 的 具体 实现 。 

假设 我 们 在 编写 这 个 老式 洗衣 机 的 程序 ， 客户 至 少 要 和 浸泡 、 洗 衣 、 漂 洗 、 脱 水 这 4 个 子 系 
统 打交道 。 如 果 其 中 的 一 个 子 系统 发 生 了 改变 , 那么 客户 的 调用 代码 就 得 发 生 改 变 。 而 通过 外 观 
将 客户 和 这 些 子 系统 隔 开 之 后 ， 如 果 修 改 子 系统 内 部 ， 只 要 外 观 不 变 ， 就 不 会 影响 客户 的 调用 。 
同样 ， 对 外 观 的 修改 也 不 会 影响 到 子 系统 ， 它 们 可 以 分 别 变化 而 互 不 影响 。 


19.3 封装 在 最 少 知识 原则 中 的 体现 


封装 在 很 大 程度 上 表达 的 是 数据 的 隐藏 。 一 个 模块 或 者 对 象 可 以 将 内 部 的 数据 或 者 实现 细 
节 隐 藏 起 来 ， 只 暴露 必要 的 接口 API 供 外 界 访问 。 对 象 之 间 难 免 产 生 联 系 ， 当 一 个 对 象 必 须 引 
用 另外 一 个 对 象 的 时 候 , 我们 可 以 让 对 象 只 暴露 必要 的 接口 ， 让 对 象 之 间 的 联系 限制 在 最 小 的 
范围 之 内 。 


同时 ,封装 也 用 来 限制 变量 的 作用 域 。 在 JavaScript 中 对 变量 作用 域 的 规定 是 : 


口 变量 在 全 局 声明 ， 或 者 在 代码 的 任何 位 置 隐 式 申明 (不 用 var )， 则 该 变量 在 全 局 可 见 ; 
口 变量 在 函数 内 显 式 申 明 (使 用 var )， 则 在 函数 内 可 见 。 


2 变量 的 可 见 性 限制 在 一 个 尽 可 能 小 的 范围 和 内， 这 个 变量 对 其 他 不 相关 模块 的 影响 就 越 小 ， 
变量 被 改写 和 发 生 冲 突 的 机 会 也 越 小 。 这 也 是 广义 的 最 少 知识 原则 的 一 种 体现 。 


假设 我 们 要 编写 一 个 具有 绥 存 效果 的 计算 乘积 的 函数 function mult(){}， 我 们 需要 一 个 对 
象 var cache = {} 来 保存 已 经 计算 过 的 结果 。cache 对 象 显然 只 对 mult 有 用 ， 把 cache 对 象 放 在 
mult 形成 的 闭 包 中 ， 显 然 比 把 它 放 在 全 局 作用 域 更 加 合适 ， 代 码 如 下 : 


var mult = (function(){ 
var cache = {}; 
return function(){ 
var args = Array.prototype.join.call( arguments, ','" ); 
if ( cache[ args ] ){ 
return cache[ args ]; 
} 


var a = 1; 
for ( var i = 0, 1 = arguments.length; i < 1; i++){ 


or 
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a = a * arguments[i]; 
} 


return cache[ args ] = a; 


} 
DO; 
mult( 1, 2, 3 ); // 输出 : 6 


其 实 , 最 少 知识 原则 也 叫 迪 米 特 法 则 (Law of Demeter, LoD ),“ 过 米 特 ” 这 个 名 字源 自 1987 
年 美国 东北 大 学 一 个 名 为 “Demeter” 的 研究 项 目 。 

许多 人 更 倾向 于 使 用 迪 米 特 法 则 这 个 名 字 , 也 许 是 因为 显得 更 酷 一 点 。 但 本 书 参考 Head First 
Design Patterns 的 建议 ， 称 之 为 最 少 知识 原则 。 一 是 因为 这 个 名 字 更 能 体现 其 含义 ， 另 一 个 原因 
是 “法 则 ”给 人 的 感觉 是 必须 强制 遵守 ， 而 原则 只 是 一 种 指导 , 没有 哪 条 原则 是 在 实际 开发 中 必 
须 遵守 的 。 比 如 ， 虽 然 遵守 最 小 知识 原则 减少 了 对 象 之 间 的 依赖 , 但 也 有 可 能 增加 一 些 庞大 到 难 
以 维护 的 第 三 者 对 象 。 跟 单一 职责 原则 一 样 , 在 实际 开发 中 , 是 否 选择 让 代码 符合 最 少 知识 原则 ， 
要 根据 具体 的 环境 来 定 。 
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开放 -封闭 原则 


在 面向 对 象 的 程序 设计 中 ， 开 放 - 封 闭 原则 (OCP ) 是 最 重要 的 一 条 原则 。 很 多 时 候 ， 一 个 
程序 具有 良好 的 设计 ， 往 往 说 明 它 是 符合 开放 -封闭 原则 的 。 

开放 -封闭 原则 最 早 由 Eiffel 语言 的 设计 者 Bertrand Meyer 在 其 著作 Object-Oriented Software 
Construction 中 提出 。 它 的 定义 如 下 : 


软件 实体 【类 、 模 块 、 函 数 ) 等 应 该 是 可 以 扩展 的 ， 但 是 不 可 修改 。 


本 节 我 们 不 采用 顺 述 的 方式 。 在 明白 开放 -封闭 原则 的 定义 之 前 ， 先 看 一 个 示例 ， 这 个 示例 
曾经 出 现在 第 15 章 中 ， 我 们 需要 再 往 window.onload 函数 中 添加 一 些 新 的 功能 。 


20.1 扩展 window.onload 函数 


假设 我 们 是 一 个 大 型 Web 项 目的 维护 人 员 ， 在 接手 这 个 项 目 时 ， 发 现 它 已 经 拥有 10 万 行 以 
上 的 JavaScript 代码 和 数 百 个 JS 文件 。 

不 久 后 接 到 了 一 个 新 的 需求 ， 即 在 window.onload 函数 中 打印 出 页 面 中 的 所 有 节点 数量 。 这 
当然 难 不 倒 我 们 了 。 于 是 我 们 打开 文本 编辑 器 ， 搜 索 出 window.onload 函数 在 文件 中 的 位 置 ， 在 
函数 内 部 添加 以 下 代码 

window.onload = function(){ 


// 原 有 代码 略 
console.log( document.getElementsByTagName( '*' ) .length ); 


3 


在 项 目 需求 变迁 的 过 程 中 , 我 们 经 常会 找到 相关 代码 , 然后 改写 它们 。 这 似乎 是 理所当然 的 
事情 , 不 改动 代码 怎么 满足 新 的 需求 呢 ? 想 要 扩展 一 个 模块 , 最 常用 的 方式 当然 是 修改 它 的 源 代 
码 。 如果 一 个 模块 不 允许 修改 , 那么 它 的 行为 常常 是 固定 的 。 然 而 , 改动 代码 是 一 种 危险 的 行为 ， 
也 许 我 们 都 遇 到 过 bug 越 改 越 多 的 场景 。 刚 刚 改 好 了 一 个 bug， 但 是 又 在 不 知 不 觉 中 引发 了 其 他 
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的 bug。 


如 果 目 前 的 window.onload 函数 是 一 个 拥有 500 行 代码 的 巨型 函数 ， 里 面 密布 着 各 种 变量 和 
交叉 的 业务 逻辑 ， 而 我 们 的 需求 又 不 仅仅 是 打印 一 个 log 这 么 简单 。 那 么 “ 改 好 一 个 bug， 引 发 
其 他 bug” 这 样 的 事情 就 很 可 能 会 发 生 。 我 们 永远 不 知道 刚刚 的 改动 会 有 什么 副作用 ， 很 可 能 会 
引发 一 系列 的 连锁 反应 。 

那么 ， 有 没有 办 法 在 不 修改 代码 的 情况 下 ， 就 能 满足 新 需求 呢 ? 在 第 15 章 中 ， 我 们 已 经 得 
到 了 答案 ， 通 过 增加 代码 ， 而 不 是 修改 代码 的 方式 ,来 给 window.onload 函数 添加 新 的 功能 ， 代 
码 如 下 : 

Function.prototype.after = function( afterfn ){ 

var _ self = this; 
return function(){ 
var ret = _ self.apply( this, arguments ); 


afterfn.apply( this, arguments ); 
return ret; 


} 


}; 

window.onload = ( window.onload || function(){} ).after(function(){ 

wy console.log( document.getElementsByTagName( '*' ).length ); 

通过 动态 装饰 函数 的 方式 ， 我 们 完全 不 用 理会 从 前 window.onload 函数 的 内 部 实现 ， 无 论 它 
的 实现 优雅 或 是 丑陋 。 就 算 我 们 作为 维护 者 ， 拿 到 的 是 一 份 混淆 压缩 过 的 代码 也 没有 关系 。 只 要 
它 从 前 是 个 稳定 运行 的 函数 , 那么 以 后 也 不 会 因为 我 们 的 新 增 需求 而 产生 错误 。 新 增 的 代码 和 原 
有 的 代码 可 以 井 水 不 犯 河水 。 


20.2 ”开放 和 封闭 


上 一 节 为 window.onload 函数 扩展 功能 时 ， 用 到 了 两 种 方式 。 一 种 是 修改 原 有 的 代码 ， 另 一 
种 是 增加 一 段 新 的 代码 。 使 用 哪 种 方式 效果 更 好 ， 已 经 不 言 而 喻 。 

现在 可 以 引出 开放 -封闭 原则 的 思想 : 当 需 要 改变 一 个 程序 的 功能 或 者 给 这 个 程序 增加 新 功 
能 的 时 候 ， 可 以 使 用 增加 代码 的 方式 ,但 是 不 允许 改动 程序 的 源 代码 。 

在 现实 生活 中 ， 我 们 也 能 找到 一 些 跟 开放 -封闭 原则 相关 的 故事 。 下 面 这 个 故事 人 尽 缘 知 ， 
且 跟 肥皂 相关 。 

有 一 家 生产 肥皂 的 大 企业 ,从 欧洲 花 巨 资 引入 了 一 条 生产 线 。 这 条 生产 线 可 以 自动 

完成 从 原材料 加 工 到 包装 成 箱 的 整个 流程 ,但 美中不足 的 是 ,生产 出 来 的 肥皂 有 一 定 的 

空 爹 几 率 。 于 是 老板 又 从 欧洲 找 来 一 支 专家 团队 ， 花 费 数 百 万 元 改造 这 一 生产 线 ， 终 于 

解决 了 生产 出 空 使 肥 皂 的 问题 。 
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另 一 家 企业 也 引入 了 这 条 生产 线 ， 他 们 同样 遇 到 了 空 盒 肥皂 的 问题 。 但 他 们 的 解决 
办 法 很 简单 : 用 一 个 大 风扇 在 生产 线 旁 边 吹 ， 空 盒 肥 撮 就 会 被 吹 走 。 


这 个 故事 告诉 我 们 ， 相 比 修改 源 程序 ,如 果 通 过 增加 几 行 代码 就 能 解决 问题 , 那 这 显然 更 加 
简单 和 优雅 ,而且 增加 代码 并 不 会 影响 原 系统 的 稳定 。 讲 述 这 个 故事 , 我 们 的 目的 不 在 于 说 明 风 
肩 的 成 本 有 多 低 ,， 而 是 想 说 明 ， 如 果 使 用 风扇 这 样 简单 的 方式 可 以 解决 问题 , 根本 没有 必要 去 大 
动 干戈 地 改造 原 有 的 生产 线 。 


20.3 ”用 对 象 的 多 态 性 消除 条 件 分 支 


过 多 的 条 件 分 支 语句 是 造成 程序 违反 开放 -封闭 原则 的 一 个 常见 原因 。 每 当 需 要 增加 一 个 新 
的 if 语句 时 ， 都 要 被 迫 改 动 原 函 数 。 把 if 换 成 switch-case 是 没有 用 的 ， 这 是 一 种 换 汤 不 换 药 
的 做 法 。 实 际 上 ， 每 当 我 们 看 到 一 大 片 的 if 或 者 swtich-case 语句 时 ， 第 一 时 间 就 应 该 考虑 ， 能 
和 否 利用 对 象 的 多 态 性 来 重 构 它 们 。 
利用 对 象 的 多 态 性 来 让 程序 遵守 开放 -封闭 原则 , 是 一 个 常用 的 技巧 。 我 们 依然 选用 1.2 节 中 
让 动物 发 出 叫 声 的 例子 。 下 面 先 提供 一 段 不 符合 开放 -封闭 原则 的 代码 。 每 当 我 们 增加 一 种 新 的 
动物 时 ， 都 需要 改动 nakesound 函数 的 内 部 实现 : 
var makeSound = function( animal ){ 
if (animal instanceof Duck ){ 
console.1og(“ 嘎 嘎嘎 ); 
}else if ( animal instanceof Chicken ){ 


console.1og(“ 咯 咯咯 ” ); 


} 


}; 


var Duck = function(){}; 
var Chicken = function(){}; 


makeSound( new Duck() ); // 输出 : 嘎嘎 嘎 
makeSound( new Chicken() );  // 输出 : 咯咯 咯 


动物 世界 里 增加 一 只 狗 之 后 ，makeSound 函数 必须 改 成 : 


var makeSound = function( animal ){ 
if ( animal instanceof Duck ){ 
console.log( ' 嘎 嘎嘎 ' ); 
}else if ( animal instanceof Chicken ){ 
console.log( ' 咯 咯咯 ' ); 
jelse if ( animal instanceof Dog ){ // 增加 跟 狗 叫 声 相关 的 代码 
console.log(' 汪 汪汪 ' ); 
} 
}; 


var Dog = function(){}; 
makeSound( new Dog() ); // 增加 一 只 狗 
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利用 多 态 的 思想 ,我 们 把 程序 中 不 变 的 部 分 隔离 出 来 ( 动物 都 会 叫 )， 然 后 把 可 变 的 部 分 封 
装 起 来 (不 同类 型 的 动物 发 出 不 同 的 叫 声 )， 这 样 一 来 程序 就 具有 了 可 扩展 性 。 当 我 们 想 让 一 只 
狗 发 出 叫 声 时 ， 只 需 增 加 一 段 代码 即 可 ， 而 不 用 去 改动 原 有 的 makeSound 函数 : 


var makeSound = function( animal ){ 
animal.sound(); 


}; 
var Duck = function(){}; 


Duck.prototype.sound = function(){ 
console.1og(“ 嘎 嘎嘎 ); 
}; 


var Chicken = function(){}; 


Chicken.prototype.sound = function(){ 
console.1log(' 咯 咯咯 ' ); 


} 


makeSound( new Duck() ); // 嘎嘎 嘎 
makeSound( new Chicken() ); // 咯咯 咯 


/水 沙沙 冰冰 六 冰冰 六 增加 动物 狗 ， 不 用 改动 原 有 的 makeSound 函数 六 于 半 水 炒米 冰冰 冰冰 六 冰冰 水 冰 炒 人 


var Dog = function(){}; 
Dog.prototype.sound = function(){ 
console.log(“' 汪 汪汪 ' )) 


3 


makeSound( new Dog() ); // 汪汪 汪 


20.4” 找 出 变化 的 地 方 


开放 -封闭 原则 是 一 个 看 起 来 比较 虚幻 的 原则 ， 并 没有 实际 的 模板 教导 我 们 怎样 亦 步 亦 趋 地 
实现 它 。 但 我 们 还 是 能 找到 一 些 让 程序 尽量 遵守 开放 -封闭 原则 的 规律 ， 最 明显 的 就 是 找 出 程序 
中 将 要 发 生变 化 的 地 方 ， 然 后 把 变化 封装 起 来 。 

通过 封装 变化 的 方式 , 可 以 把 系统 中 稳定 不 变 的 部 分 和 容易 变化 的 部 分 隔离 开 来 。 在 系统 的 
演变 过 程 中 , 我 们 只 需要 替换 那些 容易 变化 的 部 分 ,如 果 这 些 部 分 是 已 经 被 封装 好 的 , 那么 替换 
起 来 也 相对 容易 。 而 变化 部 分 之 外 的 就 是 稳定 的 部 分 。 在 系统 的 演变 过 程 中 , 稳定 的 部 分 是 不 需 
要 改变 的 。 

在 上 一 节 的 例子 中 , 由 于 每 种 动物 的 叫 声 都 不 同 ， 所 以 动物 具体 怎么 叫 是 可 变 的 ， 于 是 我 们 
把 动物 具体 怎么 叫 的 逻辑 从 makeSound 函数 中 分 离 出 来 。 

而 动物 都 会 叫 这 是 不 变 的 ，makeSound 函数 里 的 实现 逻辑 只 跟 动物 都 会 叫 有 关 ， 这 样 一 来 ， 
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makeSound 就 成 了 一 个 稳定 和 封闭 的 函数 。 

除了 利用 对 象 的 多 态 性 之 外 ， 还 有 其 他 方式 可 以 帮助 我 们 编写 遵守 开放 -封闭 原则 的 代码 ， 
下 面 将 详细 介绍 。 

1. 放置 挂钩 

放置 挂钩 (hook ) 也 是 分 离 变化 的 一 种 方式 。 我 们 在 程序 有 可 能 发 后 变化 的 地 方 放置 一 个 挂 
钩 ,， 挂 钧 的 返回 结果 决定 了 程序 的 下 一 步 走 向 。 这 样 一 来 ， 原 本 的 代码 执行 路 径 上 就 出 现 了 一 个 
分 叉 路 口 ， 程 序 未 来 的 执行 方向 被 预 埋 下 多 种 可 能 性 。 

翻阅 过 jQuery 源 代码 的 读者 也 许 会 留意 ，jQuery 从 1.4 版 本 开始 ， 陆 续 加 入 了 fixHooks、 
keyHooks 、mouseHooks 、cssHooks 等 挂钩 。 在 第 11 章 中 我 们 已 经 见 过 hook 的 作用 , Template Method 
模式 中 的 父 类 是 一 个 相当 稳定 的 类 ， 它 封装 了 子 类 的 算法 骨架 和 执行 步骤 。 

由 于 子 类 的 数量 是 无 限制 的 ， 总 会 有 一 些 “ 个 性 化 ”的 子 类 迫使 我 们 不 得 不 去 改变 已 经 封装 
好 的 算法 骨架 。 于 是 我 们 可 以 在 父 类 中 的 某 个 容易 变化 的 地 方 放置 挂钩 , 挂钩 的 返回 结果 由 具体 
子 类 决定 。 这 样 一 来 ， 程 序 就 拥有 了 变化 的 可 能 。 

关于 模板 方法 模式 中 的 挂钩 应 用 ， 可 以 参考 第 11 章 。 

2. 使 用 回调 函数 

在 JavaScript 中 ， 函 数 可 以 作为 参数 传递 给 另外 一 个 函数 ， 这 是 高 阶 函 数 的 意义 之 一 。 在 这 
种 情况 下 ， 我 们 通常 会 把 这 个 函数 称 为 回调 函数 。 在 JavaScript 版 本 的 设计 模式 中 ， 策 略 模式 和 
命令 模式 等 都 可 以 用 回调 函数 轻松 实现 。 

回调 函数 是 一 种 特殊 的 挂钩。 我 们 可 以 把 一 部 分 易于 变化 的 逻辑 封装 在 回调 函数 里 ， 然 后 把 
回调 函数 当 作 参数 传人 一 个 稳定 和 封闭 的 函数 中 。 当 回调 函数 被 执行 的 时 候 , 程序 就 可 以 因为 回 
调 函 数 的 内 部 逻辑 不 同 ， 而 产生 不 同 的 结果 。 

比如 ， 我 们 通过 ajax 异步 请 求 用 户 信息 之 后 要 做 一 些 事 情 ， 请 求 用 户 信息 的 过 程 是 不 变 的 ， 
而 获取 到 用 户 信息 之 后 要 做 什么 事情 ， 则 是 可 能 变化 的 : 


var getUserInfo = function( callback ){ 
$.ajax( 'http:// xxx.com/getUserInfo', callback ); 


了 


getUserInfo( function( data ){ 
console.log( data.userName ); 


getUserInfo( function( data ){ 
console.log( data.userId ); 
另外 一 个 例子 是 关于 Array.prototype.map 的 。 在 不 支持 Array.prototype.map 的 浏览 器 中 , 我 
们 可 以 简单 地 模拟 实现 一 个 map 函数 。 
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arrayMap 函数 的 作用 是 把 一 个 数组 “映射 ”为 另外 一 个 数组 。 映 射 的 步骤 是 不 变 的 ， 而 映射 
的 规则 是 可 变 的 ， 于 是 我 们 把 这 部 分 规则 放 在 回调 函数 中 ， 传 人 arrayMap 函数 : 


var arrayMap = function( ary, callback ){ 
var i = 0， 
length = ary.length, 
value, 
ret = []; 


for ( ; i < length; i++ ){ 
value = callback( i, ary[ i ] ); 
ret.push( value ); 


} 


return ret; 


var a = arrayMap( [ 1, 2, 3 ], function( i, n ){ 
return n * 2; 


}); 


var b = arrayMap( [ 1, 2, 3 ], function( i, n ){ 
return n * 3; 


DS 


console.log( a ); // 输出 : [ 2, 4, 6 ] 
console.1og( b ); // 输出 : [ 3, 6, 9 ] 


20.5 ”设计 模式 中 的 开放 一 封闭 原则 


有 一 种 说 法 是 , 设计 模式 就 是 给 做 的 好 的 设计 取 个 名 字 。 几 乎 所 有 的 设计 模式 都 是 遵守 开放 - 
封闭 原则 的 ， 我 们 见 到 的 好 设计 ， 通 常 都 经 得 起 开放 -封闭 原则 的 考验 。 不 管 是 具体 的 各 种 设计 
模式 ， 还 是 更 抽象 的 面向 对 象 设计 原则 ， 比 如 单一 职责 原则 、 最 少 知识 原则 、 依 赖 倒置 原则 等 ， 
都 是 为 了 让 程序 遵守 开放 -封闭 原则 而 出 现 的 。 可 以 这 样 说 , 开放 -封闭 原则 是 编写 一 个 好 程序 的 
目标 ， 其 他 设计 原则 都 是 达到 这 个 目标 的 过 程 。 

本 章 我 们 已 经 讨论 过 装饰 者 模式 是 如 何 遵守 开放 -封闭 原则 的 ， 本 节 将 继续 例 举 几 个 模式 ， 
来 更 深 一 步 地 了 解 设计 模式 在 遵守 开放 -封闭 原则 方面 做 出 的 努力 。 

1. 发 布 -订阅 模式 

发 布 -订阅 模式 用 来 降低 多 个 对 象 之 间 的 依赖 关系 , 它 可 以 取代 对 象 之 间 硬 编码 的 通知 机 制 ， 
一 个 对 象 不 用 再 显 式 地 调用 另外 一 个 对 象 的 某 个 接口 。 当 有 新 的 订阅 者 出 现时 ,发 布 者 的 代码 不 
需要 进行 任何 修改 ; 同样 当 发 布 者 需要 改变 时 ， 也 不 会 影响 到 之 前 的 订阅 者 。 

2. 模板 方法 模式 

在 第 11 章 中 ,我 们 曾 提 到 ， 模 板 方法 模式 是 一 种 典型 的 通过 封装 变化 来 提高 系统 扩展 性 的 
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设计 模式 。 在 一 个 运用 了 模板 方法 模式 的 程序 中 , 子 类 的 方法 种 类 和 执行 顺序 都 是 不 变 的 ,所 以 
我 们 把 这 部 分 逻辑 抽出 来 放 到 父 类 的 模板 方法 里 面 ; 而 子 类 的 方法 具体 怎么 实现 则 是 可 变 的 , 于 
是 把 这 部 分 变化 的 逻辑 封装 到 子 类 中 。 通 过 增加 新 的 子 类 , 便 能 给 系统 增加 新 的 功能 ， 并 不 需要 
改动 抽象 父 类 以 及 其 他 的 子 类 ， 这 也 是 符合 开放 -封闭 原则 的 。 

3. 策略 模式 

策略 模式 和 模板 方法 模式 是 一 对 竞争 者 。 在 大 多 数 情况 下 ,它们 可 以 相互 替换 使 用 。 模 板 方 
法 模式 基于 继承 的 思想 ， 而 策略 模式 则 偏重 于 组 合 和 委托 。 

策略 模式 将 各 种 算法 都 封装 成 单独 的 策略 类 , 这 些 策 略 类 可 以 被 交换 使 用 。 策 略 和 使 用 策略 
的 客户 代码 可 以 分 别 独立 进行 修改 而 互 不 影响 。 我 们 增加 一 个 新 的 策略 类 也 非常 方便 , 完全 不 用 
修改 之 前 的 代码 。 

4. 代理 模式 

我 们 在 第 6 章 中 举 了 几 个 例子 ， 开 放 - 封 闭 原则 在 它们 之 中 都 得 到 了 体现 。 拿 预 加 载 图 片 举 
例 ， 我 们 现在 已 有 一 个 给 图 片 设置 src 的 函数 myImage， 当 我 们 想 为 它 增 加 图 片 预 加 载 功能 时 ， 
一 种 做 法 是 改动 myImage 函数 内 部 的 代码 ， 更 好 的 做 法 是 提供 一 个 代理 函数 proxyMyImage， 代 理 
函数 负责 图 片 预 加 载 ,在 图 片 预 加 载 完 成 之 后 ,再 将 请 求 转交 给 原来 的 myImage 孙 数 ，myImage 在 
这 个 过 程 中 不 需要 任何 改动 。 

预 加 载 图 片 的 功能 和 给 图 片 设置 src 的 功能 被 隔离 在 两 个 函数 里 ,它们 可 以 单独 改变 而 互 不 
影响 。myImage 不 知晓 代理 的 存在 ， 它 可 以 继续 专注 于 自己 的 职责 一 一 给 图 片 设置 src。 

5. 职责 链 模式 

在 第 14 章 的 学 习 中 , 我 们 遇 到 过 一 个 例子 , 把 一 个 巨大 的 订单 函数 分 别 拆 成 了 500 元 订单 、 
200 元 订单 以 及 普通 订单 的 3 个 函数 。 这 3 个 函数 通过 职责 链 连 接 在 一 起 ， 客 户 的 请 求 会 在 这 条 
链条 里 面 依次 传递 : 


var order500yuan = new Chain(function( orderType, pay, stock ){ 


// 具体 代码 略 
}); 


var order200yuan = new Chain(function( orderType, pay, stock ){ 


// 具体 代码 略 
}); 


var orderNormal = new Chain(function( orderType, pay, stock ){ 


// 具体 代码 略 
}); 


order500yuan.setNextSuccessor( order200yuan ).setNextSuccessor( orderNormal ); 
order500yuan.passRequest( 1, true, 10 ); // 500 元 定金 预购 ， 得 到 100 优惠 券 


可 以 看 到 ， 当 我 们 增加 一 个 新 类 型 的 订单 函数 时 , 不 需要 改动 原 有 的 订单 函数 代码 ， 只 需要 
在 链条 中 增加 一 个 新 的 节点 。 
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20.6 ”开放 一 封闭 原则 的 相对 性 
在 职责 链 模 式 代码 中 ， 大 家 也 许 会 产生 这 个 疑问 :开放 -封闭 原 


则 要 求 我 们 只 能 通过 增加 源 


代码 的 方式 扩展 程序 的 功能 ， 而 不 允许 修改 源 代码 。 那 当 我 们 往 职责 链 中 增加 一 个 新 的 100 元 订 


单 函 数 节 点 时 ， 不 也 必须 改动 设置 链条 的 代码 吗 ? 代码 如 下 : 


order500yuan.setNextSuccessor( order200yuan ).setNextSuccessor( orderNormal ); 


变 为 : 


order500yuan.setNextSuccessor( order200yuan ) .setNextSuccessor( order100yuan 


).setNextSuccessor( orderNormal ); 


实际 上 ， 让 程序 保持 完全 封闭 是 不 容易 做 到 的 。 就 算 技 术 上 做 得 到 ,也 需要 花费 太 多 的 时 间 


和 精力 。 而 且 让 程序 符合 开放 -封闭 原则 的 代价 是 引入 更 多 的 抽象 层 
大 代码 的 复杂 度 。 


次 ， 更 多 的 抽象 有 可 能 会 增 


更 何况 , 有 一 些 代码 是 无 论 如 何 也 不 能 完全 封闭 的 ， 总 会 存在 一 些 无 法 对 其 封闭 的 变化 。 作 


为 程序 员 ， 我 们 可 以 做 到 的 有 下 面 两 点 。 


修改 它 提供 的 配置 文件 ， 总 比 修改 它 的 源 代码 来 得 简单 。 
比如 在 第 14 章 中 出 现 的 那个 巨大 的 订单 函数 ， 它 包含 了 各 种 订 


D 挑选 出 最 容易 发 生变 化 的 地 方 ， 然 后 构造 抽象 来 封闭 这 些 变化 。 
D 在 不 可 避免 发 生 修改 的 时 候 ， 尽 量 修改 那些 相对 容易 修改 的 地 方 。 拿 一 个 开源 库 来 说 ， 


单 的 逻辑 ， 有 500 元 和 200 


元 的 ， 也 有 普通 订单 的 。 这 个 函数 是 最 有 可 能 发 生变 化 的 , 一旦 增加 新 的 订单 ， 就 必须 修改 这 个 


巨大 的 函数 。 而 用 职责 链 模 式 重 构 之 后 , 我们 只 需要 新 增 一 个 节点 ， 
连接 顺序 。 重 构 后 的 修改 方式 显然 更 加 清晰 简单 。 


20.7 ”接受 第 一 次 愚弄 


然后 重新 设置 链条 中 节点 的 


下 面 这 段 话 引 自 Bob 大 叔 的 《敏捷 软件 开发 原则 、 模 式 与 实践 六 


有 和 名 古老 的 该 语 说 :“ 轴 再 我 一 次 ， 应 该 盖 愧 的 是 你 。 再 次 
我 。” 这 也 是 一 种 有 效 的 对 待 软件 设计 的 态度 。 为 了 防止 软件 背 
们 会 允许 自己 被 愚弄 一 次 。 


让 程序 一 开始 就 尽量 遵守 开放 -封闭 原则 ， 并 不 是 一 件 很 容易 的 
快 知道 程序 在 哪些 地 方 会 发 生变 化 ,这 要 求 我 们 有 一 些 “ 未 下 先知 ” 
序 员 的 需求 排 期 并 不 是 无 限 的 ， 所 以 我 们 可 以 说 服 自 己 去 接受 不 合 弄 


愚弄 我 ， 应 该 着 愧 的 是 
着 不 必要 的 复杂 性 ， 我 


事情 。 一 方面 ， 我 们 需要 尽 
的 能 力 。 男 一 方面 ， 留 给 程 
的 代码 带 来 的 第 一 次 愚弄 。 


在 最 初 编写 代码 的 时 候 ， 先 假设 变化 永远 不 会 发 生 , 这 有 利于 我 们 迅速 完成 需求 。 当 变化 发 生 并 
且 对 我 们 接 下 来 的 工作 造成 影响 的 时 候 , 可 以 再 回 过 头 来 封装 这 些 变化 的 地 方 。 然 后 确保 我 们 不 
会 掉 进 同一 个 坑 里 ， 这 有 点 像 星矢 说 的 :“ 圣 斗士 不 会 被 同样 的 招数 击 倒 第 二 次 。 
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接口 和 面向 接口 编程 


当 我 们 谈 到 接口 的 时 候 ， 通 常会 涉及 以 下 几 种 含义 ,下 面 先 简单 介绍 。 

我 们 经 常 说 一 个 库 或 者 模块 对 外 提供 了 某 某 API 接口 。 通 过 主动 暴露 的 接口 来 通信 , 可 以 隐 
藏 软件 系统 内 部 的 工作 细节 。 这 也 是 我 们 最 熟悉 的 第 一 种 接口 含义 。 
第 二 种 接口 是 一 些 语言 提供 的 关键 字 ， 比 如 Java 的 interface。interface 关键 字 可 以 产生 一 
个 完全 抽象 的 类 。 这 个 完全 抽象 的 类 用 来 表示 一 种 契约 ， 专 门 负责 建立 类 与 类 之 间 的 联系 。 

第 三 种 接口 即 是 我 们 谈论 的 “面向 接口 编程 ”中 的 接口 , 接口 的 含义 在 这 里 体现 得 更 为 抽象 。 
用 《设计 模式 》 中 的 话说 就 是 : 

接口 是 对 象 能 响应 的 请 求 的 集合 。 


本 章 主要 讨论 的 是 第 二 种 和 第 三 种 接口 。 首 先 要 讲 清楚 的 是 , 本 章 的 前 半 部 分 都 是 针对 Java 
语言 的 讲解 ， 这 是 因为 JavaScript 并 没有 从 语言 层面 提供 对 抽象 类 (Abstract class ) 或 者 接口 
interface ) 的 支持 ， 我 们 有 必要 从 一 门 提供 了 抽象 类 和 接口 的 语言 开始 ， 逐 步 了 解 “面向 接口 
编程 ”在 面向 对 象 程序 设计 中 的 作用 。 


21.1 回 到 Java 的 抽象 类 


首先 让 我 们 来 回顾 一 下 1.2 节 中 的 动物 世界 。 目 前 我 们 有 一 个 鸭子 类 puck， 还 有 一 个 让 鸭子 
发 出 叫 声 的 AnimalSound 类 ， 该 类 有 一 个 makesound 方法 ， 接 收 Duck 类 型 的 对 象 作为 参数 ， 这 几 
个 类 一 直 合作 得 很 愉快 ， 代 码 如 下 : 

public class Duck { // 鸭子 类 
public void makeSound(){ 


System.out.pTintln(“ 嘎 嘎嘎 ”); 
} 


JP 


} 
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public class AnimalSound { 
public void makeSound( Duck duck ){ // (1) 只 接受 Duck 类 型 的 参数 
duck.makeSound(); 
} 


} 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound = new AnimalSound(); 
Duck duck = new Duck(); 
animalSound.makeSound( duck ); // 输出 : 嘎嘎 嘎 
} 
} 


目前 已 经 可 以 顺利 地 让 鸭子 发 出 叫 声 。 后 来 动物 世界 里 又 增加 了 一 些 鸡 , 现在 我 们 想 让 鸡 也 
叫唤 起 来 ,但 发 现 这 是 一 件 不 可 能 完成 的 事情 ， 因 为 在 上 面 这 段 代 码 的 (1) 处 ， 即 AnimalSound 类 
的 sound 方 法 里 ， 被 规定 只 能 接受 Duck 类 型 的 对 象 作为 参数 : 


public class Chicken { // 鸡 类 
public void makeSound(){ 
System.out.println(“" 咯 咯咯 "” ); 
} 


} 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound = new AnimalSound(); 
Chicken chicken = new Chicken(); 
animalSound.makeSound( chicken ); 
// 报错 ，animalSound.makeSound 只 能 接受 Duck 类 型 的 参数 
} 
} 


在 享受 静态 语言 类 型 检查 带 来 的 安全 性 的 同时 ， 我们 也 失去 了 一 些 编写 代码 的 自由 。 

通过 1.3 节 的 讲解 ， 我 们 已 经 明白 ， 静 态 类 型 语言 通常 设计 为 可 以 “向 上 转型 ”。 当 给 一 个 
类 变量 赋值 时 ， 这 个 变量 的 类 型 既 可 以 使 用 这 个 类 本 身 ， 也 可 以 使 用 这 个 类 的 超 类。 就 像 看 到 
天 上 有 只 麻雀 ,我 们 既 可 以 说 “一 只 麻 淮 在 飞 ”， 也 可 以 说 “一 只 鸟 在 飞 "， 甚 至 可 以 说 成 “一 
只 动物 在 飞 "。 通 过 向 上 转型 ， 对 象 的 具体 类 型 被 隐藏 在 “ 超 类 型 ”身后 。 当 对 象 类 型 之 间 的 耦 
合 关系 被 解除 之 后 ， 这 些 对 象 才能 在 类 型 检查 系统 的 监视 下 相互 蔡 换 使 用 ， 这 样 才 能 看 到 对 象 
的 多 态 性 。 

所 以 如 果 想 让 鸡 也 叫唤 起 来 , 必须 先 把 duck 对 象 和 chicken 对 象 都 向 上 转型 为 它们 的 超 类 型 
Animal 类 ， 进 行 向 上 转型 的 工具 就 是 抽象 类 或 者 interface。 我 们 即将 使 用 的 是 抽象 类 。 


先 创建 一 个 Animal 抽象 类 : 


public abstract class Animal { 
abstract void makeSound();  // 抽象 方法 


} 
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然后 让 Duck 类 和 chicken 类 都 继承 自 抽象 类 Animal: 


public class Chicken extends Anjimal{ 
public void makeSound(){ 
System.out.println(“" 咯 咯咯 "”); 
} 
} 


public class Duck extends Animal{ 
public void makeSound(){ 
System.out .println(“ 嘎 嘎嘎 ”); 
} 
} 
也 可 以 把 Animal 定义 为 一 个 具体 类 而 不 是 抽象 类 ， 但 一 般 不 这 么 做 。Scott Meyers 曾 指出 ， 
只 要 有 可 能 » 不 要 从 具体 类 继承 。 
现在 剩 下 的 就 是 让 AnimalSound 类 的 makeSound 方法 接收 Animal 类 型 的 参数 ， 而 不 是 具体 的 
Duck 类 型 或 者 Chicken 类 型 ; 


public class AnimalSound{ 
public void makeSound( Animal animal ){ // 接收 Animal 类 型 的 参数 ， 而 非 Duck 类 型 或 Chicken 类 型 
animal .makeSound(); 
} 
} 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound = new AnimalSound (); 


Animal duck = new Duck(); // 向 上 转型 
Animal chicken = new Chicken(); // 向 上 转型 
animalSound.makeSound( duck ); // 输出 : 嘎嘎 嘎 
animalSound.makeSound( chicken ); // 输出 : 咯咯 咯 


} 


本 节 通 过 抽象 类 完成 了 一 个 体现 对 象 多 态 性 的 例子 。 但 目前 的 重点 并 非 讲 解 多 态 , 而 是 在 于 
说 明 抽 象 类 。 抽 象 类 在 这 里 主要 有 以 下 两 个 作用 。 
口 向 上 转型 。 让 Duck 对 象 和 Chicken 对 象 的 类 型 都 隐藏 在 Animal 类 型 身后 ， 隐 藏 对 象 的 具体 
类 型 之 后 , duck 对 象 和 chicken 对 象 才能 被 交换 使 用 , 这 是 让 对 象 表现 出 多 态 性 的 必 经 之 路 。 
口 建立 一 些 契 约 。 继 承 自 抽象 类 的 具体 类 都 会 继承 抽象 类 里 的 abstract 方法 ， 并且 要 求 履 
写 它 们 。 这 些 契 约 在 实际 编程 中 非常 重要 ， 可 以 帮助 我 们 编写 可 靠 性 更 高 的 代码 。 比 如 
在 命令 模式 中 ,各 个 子 命令 类 都 必须 实现 execute 方法 ,才能 保证 在 调用 command.execute 
的 时 候 不 会 抛 出 异常 。 如 果 让 子 命令 类 openTvCommand 继承 自 抽象 类 Command: 


abstract class Command{ 
public abstract void execute(); 
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public class OpenTvCommand extends Command{ 
public OpenTvCommand (){}; 
public void execute(){ 
System.out.println(“" 打 开 电 视 机 ”); 


} 
那么 自然 有 编译 器 帮助 我 们 检查 和 保证 子 命令 类 0penTvCommand 履 写 了 抽象 类 Command 中 的 
execute 抽象 方法 。 如 果 没 有 这 样 做 ， 编 译 器 会 尽 可 能 早 地 抛 出 错误 来 提醒 正在 编写 这 段 代 码 的 
程序 员 。 
总 而 言 之 ,不 关注 对 象 的 具体 类 型 ， 而 仅仅 针对 超 类 型 中 的 “契约 方法 ”来 编写 程序 ， 可 以 
产生 可 靠 性 高 的 程序 , 也 可 以 极 大 地 减少 子 系统 实现 之 间 的 相互 依赖 关系 , 这 就 是 我 们 本 章 要 讨 
论 的 主题 : 


面向 接口 编程 ， 而 不 是 面向 实现 编程 。 


奇怪 的 是 , 本 节 我 们 一 直 讨 论 的 是 抽象 类 , 跟 接 口 又 有 什么 关系 呢 ? 实际 上 这 里 的 接口 并 不 
是 指 interface， 而 是 一 个 抽象 的 概念 。 
从 过 程 上 来 看 ,“ 面 向 接口 编程 ”其 实 是 “面向 超 类 型 编程 ”。 当 对 象 的 具体 类 型 被 隐藏 在 超 
类 型 身后 时 , 这 些 对象 就 可 以 相互 替换 使 用 , 我 们 的 关注 点 才能 从 对 象 的 类 型 上 转移 到 对 象 的 行 
为 上 “面向 接口 编程 ”也 可 以 看 成 面向 抽象 编程 ， 即 针对 超 类 型 中 的 abstract 方法 编程 ， 接 口 
在 这 里 被 当成 abstract 方法 中 约定 的 契约 行为 。 这 些 契 约 行为 暴露 了 一 个 类 或 者 对 象 能 够 做 什 
么 ， 但 是 不 关心 具体 如 何 去 做 。 


21.2 interface 


除了 用 抽象 类 来 完成 面向 接口 编程 之 外 ， 使 用 interface 也 可 以 达到 同样 的 效果 。 虽 然 很 多 
人 在 实际 使 用 中 刻意 区 分 抽象 类 和 interface， 但 使 用 interface 实际 上 也 是 继承 的 一 种 方式 ， 叫 
作 接 口 继承 。 


相对 于 单 继 承 的 抽象 类 , 一 个 类 可 以 实现 多 个 interface。 抽 象 类 中 除了 abstract 方法 之 外 ， 
还 可 以 有 一 些 供 子 类 公用 的 具体 方法 。interface 使 抽象 的 概念 更 进一步 ， 它 产生 一 个 完全 抽象 
的 类 ， 不 提供 任何 具体 实现 和 方法 体 ( Java 8 已 经 有 了 提供 实现 方法 的 interface )， 但 允许 该 
interface 的 创建 者 确定 方法 名 、 参 数列 表 和 返回 类 型 ， 这 相当 于 提供 一 些 行 为 上 的 约定 ,但 不 
关心 该 行为 的 具体 实现 过 程 。 

interface 同样 可 以 用 于 向 上 转型 , 这 也 是 让 对 象 表现 出 多 态 性 的 一 条 途径 , 实现 了 同一 个 接 
口 的 两 个 类 就 可 以 被 相互 蔡 换 使 用 。 

再 回 到 用 抽象 类 实现 让 鸭子 和 鸡 发 出 叫 声 的 故事 。 这 个 故事 得 以 完美 收场 的 关键 是 让 抽象 类 
Animal 给 duck 和 chicken 进行 向 上 转型 。 但 此 时 也 引入 了 一 个 限制 ， 抽 象 类 是 基于 单 继承 的 ,也 
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就 是 说 我 们 不 可 能 让 Duck 和 chicken 再 继承 自 另 一 个 家 禽类 。 如 果 使 用 interface， 可 以 仅仅 针 
对 发 出 叫 声 这 个 行为 来 编写 程序 ， 同 时 一 个 类 也 可 以 实现 多 个 interface。 

下 面 用 interface 来 改写 基于 抽象 类 的 代码 。 我们 先 定义 Animal 接口 , 所 有 实现 了 Animal 接 
的 动物 类 都 将 拥有 Animal 接口 中 约定 的 行为 : 


public interface Animal{ 
abstract void makeSound(); 


厂 


} 


public class Duck implements Anjimal{ 
public void makeSound() { // 重 写 Animal 接口 的 makeSound 抽象 方法 
System.out.pTintln(“ 嘎 嘎嘎"”); 
} 


} 


public class Chicken implements Anjimal{ 
public void makeSound() { // 重 写 Animal 接口 的 makeSound 抽象 方法 
System.out.println(“" 咯 咯咯 "”); 
} 


} 


public class AnimalSound { 
public void makeSound( Animal animal ){ 
animal .makeSound(); 
} 


} 


public class Test { 
public static void main( String args[] ){ 
Animal duck = new Duck(); 
Animal chicken = new Chicken(); 


AnimalSound animalSound = new AnimalSound(); 


animalSound.makeSound( duck ); // 输出 : 嘎嘎 嘎 
animalSound.makeSound( chicken ); // 输出 : 咯咯 咯 


21.3 JavaScript 语言 是 否 需要 抽象 类 和 interface 


通过 前 面 的 讲解 ， 我 们 明白 了 抽象 类 和 interface 的 作用 主要 都 是 以 下 两 点 。 
口 通过 向 上 转型 来 隐藏 对 象 的 真正 类 型 ， 以 表现 对 象 的 多 态 性 。 
口 约定 类 与 类 之 间 的 一 些 契 约 行为 。 

对 于 JavaScript 而 言 ， 因 为 JavaScript 是 一 门 动态 类 型 语言 ， 类 型 本 身 在 JavaScript 中 是 一 个 
相对 模糊 的 概念 。 也 就 是 说 ， 不 需要 利用 抽象 类 或 者 interface 给 对 象 进行 “向 上 转型 ”。 除 了 
number 、string 、boolean 等 基本 数据 类 型 之 外 ， 其 他 的 对 和 象 都 可 以 被 看 成 “天 生 ” 被 “向 上 转型 ” 
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成 了 0bject 类 型 ; 


var ary = new Array(); 
var date = new Date(); 


如 果 JavaScript 是 一 门 静 态 类 型 语言 ， 上 面 的 代码 也 许可 以 理解 为 : 


Array ary = new Array(); 
Date date = new Date(); 


或 者 : 


Object ary = new Array(); 
Object date = new Date(); 


很 少 有 人 在 JavaScript 开发 中 去 关心 对 象 的 真正 类 型 。 在 动态 类 型 语言 中 ,对象 的 多 态 性 是 
与 生 俱 来 的 , 但 在 男 外 一 些 静 态 类 型 语言 中 ,对 象 类 型 之 间 的 解 看 非常 重要 ,甚至 有 一 些 设计 模 
式 的 主要 目的 就 是 专门 隐藏 对 象 的 真正 类 型 。 

因为 不 需要 进行 向 上 转型 ， 接 口 在 JavaScript 中 的 最 大 作用 就 退化 到 了 检查 代码 的 规范 性 。 
比如 检查 某 个 对 象 是 否 实现 了 某 个 方法 , 或 者 检查 是 否 给 函数 传人 了 预期 类 型 的 参数 。 如 果 忽略 
了 这 两 点 ， 有 可 能 会 在 代码 中 留 下 一 些 隐 藏 的 bug。 比 如 我 们 尝试 执行 obj 对 象 的 show 方 法 , 但 
是 obj 对 象 本 身 却 没有 实现 这 个 方法 ， 代 码 如 下 : 


function show( obj ){ 
obj.show(); // Uncaught TypeError: undefined is not a function 


var myObject = {}; // my0bject 对 象 没有 show 方法 
show( myObject ); 


或 者 : 
function show( obj ){ 
obj.show(); // TypeError: number is not a function 
var my0bject = {  ”// my0bject.show 不 是 Function 类 型 
show: 1 
}; 
show( myObject ); 
此 时 ， 我 们 不 得 不 加 上 一 些 防御 性 代码 : 
function show( obj ){ 


if ( obj && typeof obj.show === 'function' ){ 
obj.show(); 


或 者 : 
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function show( obj ){ 


try{ 
obj.show(); 
}catch( e ){ 


】 
} 


var myObject = {}; // my0bject 对 象 没有 show 方法 

// var my0bject = {  ”// my0bject.show 不 是 Function 类 型 
// show: 1 

/1/1}; 


show( myObject ); 

如 果 JavaScript 有 编译 器 帮 有 我 们 检查 代码 的 规范 性 ， 那 事情 要 比 现在 美好 得 多 ， 我 们 不 用 在 业 
务 代码 中 到 处 插入 一 些 跟 业 务 逻 辑 无 关 的 防御 性 代码 。 作为 一 门 解释 执行 的 动态 类 型 语言 ， 把 希 
望 寄托 在 编译 器 上 是 不 可 能 了 。 如 果 要 处 理 这 类 异常 情况 ,我 们 只 有 手动 编写 一 些 接口 检查 的 代码 。 


21.4 用 鸭子 类 型 进行 接口 检查 
在 12 节 中 ， 我 们 已 经 了 解 过 鸭子 类 型 的 概念 : 
“如 果 它 走 起 路 来 像 网 子 ， 叫 起 来 也 是 鸭子 ， 那 么 它 就 是 鸭子 。” 


了 鸭子 类 型 是 动态 类 型 语言 面向 对 象 设 计 中 的 一 个 重要 概念 。 利 用 鸭子 类 型 的 思想 , 不 必 借 助 
超 类 型 的 帮助 ， 就 能 在 动态 类 型 语言 中 轻松 地 实现 本 章 提 到 的 设计 原则 : 面向 接口 编程 ， 而 不 是 
面向 实现 编程 。 比 如 , 一 个 对 象 如 果 有 push 和 pop 方法 ,， 并 且 提 供 了 正确 的 实现 , 它 就 能 被 当 作 
栈 来 使 用 ; 一 个 对 象 如 果 有 length 属性 ， 也 可 以 依照 下 标 来 存 取 属性 ， 这 个 对 象 就 可 以 被 当 作 
数组 来 使 用 。 如 果 两 个 对 象 拥 有 相同 的 方法 ， 则 有 很 大 的 可 能 性 它们 可 以 被 相互 替换 使 用 。 

在 0bject.prototype.toString.call( [] ) ==='[object Array]' 被 发 现 之 前 ， 我 们 经 常用 鸭子 
类 型 的 思想 来 判断 一 个 对 象 是 否 是 一 个 数组 ， 代 码 如 下 : 


var isArray = function( obj ){ 
return obj && 


typeof obj === 'object' && 
typeof obj.length === 'number' && 
typeof obj.splice === “function' 


当然 在 JavaScript 开发 中 ， 总 是 进行 接口 检查 是 不 明智 的 ， 也 是 没有 必要 的 ， 毕 竞 现在 还 找 
不 到 一 种 好 用 并 且 通 用 的 方式 来 模拟 接口 检查 ， 跟 业务 逻辑 无 关 的 接口 检查 也 会 让 很 多 
JavaScript 程 序 员 觉得 不 值得 和 不 习惯 .在 Ross Harmes 和 Dustin Diaz 合 著 的 Pro JavaScript Design 
Pattrns 一 书 中 , 提供 了 一 种 根据 鸭子 类 型 思想 模拟 接口 检查 的 方法 , 但 这 种 基于 双重 循环 的 检查 
方法 并 不 是 很 实用 ， 而 且 只 能 检查 对 象 的 某 个 属性 是 否 属 于 Function 类 型 。 
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21.5 用 TypeScript 编写 基于 interface 的 命令 模式 
虽然 在 大 多 数 时 候 interface 给 JavaScript 开发 带 来 的 价值 并 不 像 在 静态 类 型 语言 中 那么 大 ， 


但 如 果 我 们 正在 编写 一 个 复杂 的 应 用 


， 还 是 会 经 常 怀念 接口 的 帮助 。 


下 面 我 们 以 基于 命令 模式 的 示例 来 说 明 interface 如 何 规范 程序 员 的 代码 编写 ， 这 段 代码 本 


身 并 没有 什么 实用 价值 ， 在 JavaScript 中 ， 我 们 一 般 用 闭 包 和 高 阶 函 数 来 实现 命令 模式 。 


假设 我 们 正在 编写 一 个 用 户 界面 程序 ,页面 中 有 成 百 上 千 个 子 菜单 。 因 为 项 目 很 复杂 , 我 们 


决定 让 整个 程序 都 基于 命令 模式 来 纺 


写 , 即 编写 菜单 集合 界面 的 是 某 个 程序 员 ,， 而 负责 实现 每 个 


子 菜单 具体 功 能 的 工作 交 给 了 另外 一 


些 程序 员 。 


那些 负责 实现 子 菜 单 功能 的 程序 


员 , 在 完成 自己 的 工作 之 后 , 会 把 子 菜单 封装 成 一 个 命令 对 


象 , 然后 把 这 个 命令 对 象 交 给 编写 菜 


集合 界面 的 程序 员 。 他 们 已 经 约定 好 ， 当 调用 子 菜单 对 象 


的 execute 方法 时 ， 会 执行 对 应 的 子 菜单 命令 。 


时 候 ， 便 会 报 出 错误 ， 代 码 如 下 : 


<html> 
<body> 


虽然 在 开发 文档 中 详细 注 明 了 每 个 子 菜单 对 象 都 必须 有 自己 的 execute 方法 ,但 还 是 有 一 个 
粗心 的 JavaScript 程序 员 忘 记 给 他 负责 的 子 菜单 对 象 实现 execute 方法 ， 于 是 当 执行 这 


个 命令 的 


<button id="exeCommand"> 执 行 菜单 命令 </button> 


<script> 


var RefreshMenuBarCommand = function(){}; 


RefreshMenuBarCommand.prototype.execute = function(){ 


console.log( ' 刷 新 菜单 界面 ' 


- 


); 


var AddSubMenuCommand = function(){}; 


AddSubMenuCommand.prototype.execute = function(){ 
console.log(' 增 加 子 菜单 '，); 


» 


var DelSubMenuCommand = function(){}; 


/***** 没 有 实现 DelSubMenuCommand.prototype.execute *****/ 


// DelSubMenuCommand.prototype. 


fh} 


execute = function(){ 


var refreshMenuBarCommand = new RefreshMenuBarCommand(), 
addSubMenuCommand = new AddSubMenuCommand(), 
delSubMenuCommand = new DelSubMenuCommand(); 


var setCommand = function( command ){ 
document.getElementById( “exeCommand”) .onclick = function(){ 
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command .execute(); 
} 
BB 


setCommand( refreshMenuBarCommand ); 

// 点 击 按钮 后 输出 : "刷新 菜单 界面 " 

setCommand( addSubMenuCommand ); 

// 点 击 按钮 后 输出 : "增加 子 菜单 " 

setCommand( delSubMenuCommand ); 

// 点 击 按钮 后 报错 。Uncaught TypeError: undefined is not a function 


</script> 
</body> 
</html> 


为 了 防止 粗心 的 程序 员 忘 记 给 某 个 子 命令 对 象 实现 execute 方法 ,我 们 只 能 在 高 层 函 数 里 添 
加 一 些 防 御 性 的 代码 , 这 样 当 程 序 在 最 终 被 执行 的 时 候 , 有 可 能 抛 出 异常 来 提醒 我 们 , 代码 如 下 : 


var setCommand = function( command ){ 
document .getElementById( 'exeCommand' ) .onclick = function(){ 
if ( typeof command.execute !== 'function' ){ 
throw new Error(“"command 对 象 必须 实现 execute 方法 "”);} 
} 


command.execute(); 
} 
}; 


如 果 确 实 不 喜欢 重复 编写 这 些 防御 性 代码 ,我 们 还 可 以 尝试 使 用 TypeScript 来 编写 这 个 程序 。 

TypeScript 是 微软 开发 的 一 种 编程 语言 ， 是 JavaScript 的 一 个 超 集 。 跟 CoffeeScript 类 似 ， 
TypeScript 代码 最 终 会 被 编译 成 原生 的 JavaScript 代码 执行 。 通 过 TypeScript， 我 们 可 以 使 用 静态 
语言 的 方式 来 编写 JavaScript 程序 。 用 TypeScript 来 实现 一 些 设 计 模 式 ， 显 得 更 加 原 汁 原味 。 

TypeScript 目前 的 版 本 还 没有 提供 对 抽象 类 的 支持 , 但 是 提供 了 interface。 下 面 我 们 就 来 编 
写 一 个 TypeScript 版 本 的 命令 模式 。 

首先 定义 Command 接口 : 


interface Command{ 
execute: Function; 
} 


接 下 来 定义 RefreshMenuBarCommand 、AddSubMenuCommand 和 DelSubMenuCommand 这 3 个 类 ， 它 们 
分 别 都 实现 了 Command 接口 ， 这 可 以 保证 它们 都 拥有 execute 方 法 : 


class RefreshMenuBarCommand implements Command{ 
constructor (){ 
} 
execute(){ 
console.1og( “刷新 菜单 界面 " ); 
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class AddSubMenuCommand implements Command{ 
constructor (){ 


execute(){ 
console.log(' 增 加 子 菜单 '，); 
} 


} 


class DelSubMenuCommand implements Command{ 
constructor (){ 


// 忘记 重 写 execute 方法 


} 


var refreshMenuBarCommand = new RefreshMenuBarCommand(), 
addSubMenuCommand = new AddSubMenuCommand(), 
delSubMenuCommand = new DelSubMenuCommand(); 


refreshMenuBarCommand.execute(); // 输出 : 刷新 菜单 界面 
addSubMenuCommand .execute(); // 输出 : 增加 子 菜单 
delSubMenuCommand .execute(); // 输出 : Uncaught TypeError: undefined is not a function 


如 图 21-1 所 示 ， 当 我 们 忘记 在 DelsubMenuCommand 类 中 重 写 execute 方法 时 ，TypeScript 提供 
的 编译 器 及 时 给 出 了 错误 提示 。 


Class DelSubMenuCommand declares interface Command but does not implement it: Type 
e “Command  . 


"DelsubMenuCommand ”is missing property “execute ”from 七 
DelSubMenuCommand 
class DelSsubMenuCommand implements Command{ 


constructor (){ 


} 


PR 了 FE J 站 类 
万 下 村 写 execute 方 莽 


图 21-1 


这 段 TypeScript 代码 翻译 过 来 的 JavaScript 代码 如 下 : 


var RefreshMenuBarCommand = (function () { 
function RefreshMenuBarCommand() { 
} 
RefreshMenuBarCommand.prototype.execute = function () { 
console.1o8g( "刷新 菜单 界面 ); 
}; 
return RefreshMenuBarCommand; 


])(); 


var AddsubMenuCommand = (function () { 
function AddSubMenuCommand() { 


} 
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AddSubMenuCommand.prototype.execute = function () { 
console.log(' 增 加 子 菜单 '); 

}; 

return AddSubMenuCommand; 


])(); 


var DelSubMenuCommand = (function () { 
function DelSubMenuCommand() { 
} 
return DelSubMenuCommand; 


])(); 


var refreshMenuBarCommand = new RefreshMenuBarCommand(), 
addSubMenuCommand = new AddSubMenuCommand(), 
delSubMenuCommand = new DelSubMenuCommand(); 


refreshMenuBarCommand.execute(); 
addSubMenuCommand .execute(); 
delSubMenuCommand.execute(); 
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代码 重 构 


本 书 并 非 志 在 讨 论 重 构 的 书 , 但 我 们 到 目前 为 止 , 实际 上 一 直 在 不 停 地 进行 代码 级 别 上 的 优 
化 。 在 讲 设 计 模式 的 章节 中 ,我 们 总 是 先 写 一 段 反 例 代 码 ， 而 后 再 介绍 一 段 通过 设计 模式 重 构 之 
后 的 更 好 的 代码 。 这 种 强烈 的 对 比 会 加 次 我 们 对 该 模式 的 理解 。 

模式 和 重 构 之 间 有 着 一 种 与 生 俱 来 的 关系 。 从 某 种 角度 来 看 , 设计 模式 的 目的 就 是 为 许多 重 
构 行 为 提供 目标 。 

在 实际 的 项 目 开 发 中 ， 除 了 使 用 设计 模式 进行 重 构 之 外 ， 还 有 一 些 常见 而 容易 忽略 的 细节 ， 
这 些 细 节 也 是 帮助 我 们 达到 重 构 目 标的 重要 手段 。 本 章 将 挑选 一 些 进 行 介绍 ,其 中 有 一 部 分 思想 
来 自 Martin Fowler 的 名 著 《 重 构 ， 改善 既 有 代码 的 设计 》 虽然 该 书 是 使 用 Java 语言 写成 的 ， 但 
这 些 重 构 的 技巧 ， 有 很 大 一 部 分 可 以 为 JavaScript 语言 所 借鉴 。 
虽然 本 章 会 提出 一 些 重 构 的 目标 和 手段 ,但 它们 都 是 建议 ,没有 哪些 是 必须 严格 遵守 的 标准 。 
具体 是 否 需 要 重 构 ， 以 及 如 何 进行 重 构 ， 这 需要 我 们 根据 系统 的 类 型 、 项 目 工 期 、 人 力 等 外 界 因 
素 一 起 决定 。 


22.1 提炼 函数 


在 JavaScript 开发 中 ,我 们 大 部 分 时 间 都 在 与 函数 打交道 ， 所 以 我 们 希望 这 些 函 数 有 着 良好 
的 命名 ,函数 体内 包含 的 逻辑 清晰 明了 。 如 果 一 个 函数 过 长 ,不 得 不 加 上 若干 注释 才能 让 这 个 函 
数 显 得 易 读 一 些 ， 那 这 些 函 数 就 很 有 必要 进行 重 构 。 

如 果 在 函数 中 有 一 段 代码 可 以 被 独立 出 来 , 那 我 们 最 好 把 这 些 代码 放 进 男 外 一 个 独立 的 函数 
中 。 这 是 一 种 很 常见 的 优化 工作 ， 这 样 做 的 好 处 主要 有 以 下 几 点 。 

口 避免 出 现 超大 函数 。 
口 独立 出 来 的 函数 有 助 于 代码 复 用 。 
口 独立 出 来 的 函数 更 容易 被 覆 写 。 
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口 独立 出 来 的 函数 如 果 拥 有 一 个 良好 的 命名 ， 它 本 身 就 起 到 了 注释 的 作用 。 


比如 在 一 个 负责 取得 用 户 信息 的 函数 里 面 ， 我 们 还 需要 打印 跟 用 户 信息 有 关 的 log， 那 么 打 
印 log 的 语句 就 可 以 被 封装 在 和 数 里 : 


var getUserInfo = function(){ 
ajax( 'http:// xxx.com/userInfo', function( data ){ 
console.log( 'userId: ' + data.userId ); 
console.log( 'userName: ' + data.userName ); 
console.log( 'nickName: ' + data.nickName ); 


}); 


改 成 : 


var getUserInfo = function(){ 
ajax( 'http:// xxx.com/userInfo', function( data 
printDetails( data ); 
}); 


— 


{ 


上 


var printDetails = function( data ){ 
console.log( 'userId: ' + data.userId ); 
console.log( 'userName: ' + data.userName ); 
console.log( 'nickName: ' + data.nickName ); 


}; 


22.2 合并 重复 的 条 件 片段 


如 果 一 个 函数 体内 有 一 些 条 件 分 支 语句 ， 而 这 些 条 件 分 支 语句 内 部 散布 了 一 些 重复 的 代码 ， 
那么 就 有 必要 进行 合并 去 重工 作 。 假 如 我 们 有 一 个 分 页 函数 paging， 该 函数 接收 一 个 参数 
currPage 表示 即将 跳 转 的 页 码 。 在 跳 转 之 前 ， 为 防止 currPage 传人 过 小 或 者 过 大 的 数 

， 我 们 要 手动 对 它 的 值 进行 修正 ， 详 见 如 下 伪 代 码 : 


var paging = function( currPage ){ 
if ( currPpage <= 0 ){ 
CUIITPage = 0; 
jump( currPage );  ”// 跳 转 
}else if ( currPage >= totalPage ){ 
currPage = totalPage; 
jump( currPage );  // 跳 转 
}else{ 
jump( currPage );  ”// 跳 转 
} 


和 


可 以 看 到 ， 负 责 跳 转 的 代码 jump( currPage ) 在 每 个 条 件 分 支 内 都 出 现 了 ， 所 以 完全 可 以 把 
这 句 代 码 独 立 出 来 : 


图 灵 社 区 会 员 轩辕 专 享 尊重 版 权 


284 第 22 章 代码 重 构 


var paging = function( currPage ){ 
if ( cuTrTPage <= 0 ){ 
currPage = 0; 
}else if ( currPage >= totalPage ){ 
currPage = totalPage; 
} 
jump( currPage ); // 把 jump 函数 独立 出 来 
}; 


22.3 ”把 条 件 分 支 语句 提 炼 成 函数 


在 程序 设计 中 , 复杂 的 条 件 分 支 语句 是 导致 程序 难以 阅读 和 理解 的 重要 原因 ,而 且 容 易 导 致 
一 个 庞大 的 函数 。 假设 现在 有 个 需求 是 编写 一 个 计算 商品 价格 的 getPrice 函数 , 商品 的 计算 只 
有 一 个 规则 : 如 果 当 前 正 处 于 夏季 ， 那 么 全 部 商品 将 以 8 折 出 售 。 代 码 如 下 : 
var getPirice = function( price ){ 
var date = new Date(); 


if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天 
return price * 0.8; 


} 
return price; 
}; 
观察 这 人 句 代码 : 
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ 
A 
} 
se he 就 是 判断 当前 是 否 正 处 于 夏天 (7~10 月 )。 这 句 代码 很 


、, 但 代码 表达 的 意图 和 代码 自身 还 存在 一 些 距离 ,阅读 代码 的 人 必 和 BE 明 
- A 。 其 实 可 以 把 这 句 代 码 提炼 成 一 个 单独 的 函数 ， 既 能 更 准确 地 表达 代码 的 意思 ， 
函数 名 本 身 又 能 起 到 注释 的 作用 。 代 码 如 下 : 
var isSummer = function(){ 


var date = new Date(); 
return date.getMonth() >= 6 8& date.getMonth() <= 9; 


var getPprice = function( price ){ 
if ( isSummer() ){ // 夏天 
return price * 0.8; 
} 
return price; 


二 
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22.4 ”合理 使 用 循环 


在 函数 体内 , 如果 有 些 代码 实际 上 负责 的 是 一 些 重复 性 的 工作 , 那么 合理 利用 循环 不 仅 可 以 
完成 同样 的 功能 ， 还 可 以 使 代码 量 更 少 。 下 面 有 一 段 创建 XHR 对 象 的 代码 ,为 了 简化 示例 ,我 们 
只 考虑 版 本 9 以 下 的 正 浏 览 器 ， 代 码 如 下 : 


Var createXHR = function(){ 


var xhr; 
try{ 
xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' ); 
}catch(e){ 
try{ 
xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0" ); 
}catch(e){ 


xhr = new ActiveXObject( 'MSXML2.XMLHttp' ); 


} 
} 


return xhr; 


}; 
var xhr = createXHR(); 
下 面 我 们 灵活 地 运用 循环 ， 可 以 得 到 跟 上 面 代码 一 样 的 效果 : 


Var createXHR = function(){ 
var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ]; 
for ( var i = 0, version; version = versions[ i++ ]; ){ 
try{ 
return new ActiveXObject( version ); 
}catch(e){ 


} 
} 
Bs 


var xhr = createXHR(); 


22.5 ”提前 让 函数 退出 代替 能 套 条 件 分 支 


许多 程序 员 都 有 这 样 一 种 观念 :“ 每 个 函数 只 能 有 一 个 人 口 和 一 个 出 口 。 现代 编程 语言 都 会 


限制 机 数 只 有 一 个 入口 。 但 关于 “函数 只 有 一 个 出 口 "， 往 往 会 有 一 些 不 同 的 看 法 。 
下 面 这 段 伪 代 码 是 遵守 “函数 只 有 一 个 出 口 的 ”的 典型 代码 : 


var del = function( obj ){ 
var ret; 
if ( !obj.isReadonly ){ // 不 为 只 读 的 才能 被 删除 
if ( obj.isFolder ){ ”// 如 果 是 文件 夹 
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ret = deleteFolder( obj ); 
}else if ( obj.isFile ){ // 如 果 是 文件 
ret = deleteFile( obj ); 
} 
} 


return ret; 

}; 

嵌 套 的 条 件 分 支 语句 绝对 是 代码 维护 者 的 于 梦 ， 对 于 阅读 代码 的 人 来 说 ， 般 套 的 计 、else 
语句 相 比 平 铺 的 if、else， 在 阅读 和 理解 上 更 加 困难 ， 有 时 候 一 个 外 层 if 分 支 的 左 括号 和 右 括 
号 之 间 相 隔 500 米 之 远 。 用 《 重 构 》 里 的 话说 ,网 套 的 条 件 分 支 往 往 是 由 一 些 深信 “每 个 函数 只 
能 有 一 个 出 口 的 ”程序 员 写 出 的 。 但 实际 上 ， 如 果 对 函数 的 剩余 部 分 不 感 兴趣 , 那 就 应 该 立即 退 
出 。 引 导 阅 读者 去 看 一 些 没 有 用 的 else 片段 ， 只 会 妨碍 他 们 对 程序 的 理解 。 

于 是 我 们 可 以 挑选 一 些 条 件 分 支 , 在 进入 这 些 条 件 分 支 之 后 ,就 立即 让 这 个 函数 退出 。 要 做 
到 这 一 点 ， 有 一 个 常见 的 技巧 ， 即 在 面 对 一 个 谍 套 的 if 分 支 时 ,我 们 可 以 把 外 层 if 表达 式 进行 
反 转 。 重 构 后 的 del 函数 如 下 : 

var del = function( obj ){ 


if ( obj.isReadOnly ){  ”// 反 转 if 表 达 式 
return; 


} 
if ( obj.isFolder ){ 
return deleteFolder( obj ); 


} 
if ( obj.isFile ){ 

return deleteFile( obj ); 
} 


js 


22.6 传递 对 象 参 数 代替 过 长 的 参数 列表 


有 时 候 一 个 函数 有 可 能 接收 多 个 参数 ， 而 参数 的 数量 越 多 ， 函 数 就 越 难 理解 和 使 用 。 使 用 该 
函数 的 人 首先 得 搞 明白 全 部 参数 的 含义 ,在 使 用 的 时 候 , 还 要 小 心 翼 又 ， 以 免 少 传 了 某 个 参数 或 
者 把 两 个 参数 搞 反 了 位 置 。 如 果 我 们 想 在 第 3 个 参数 和 第 4 个 参数 之 中 增加 一 个 新 的 参数 ， 就 会 
涉及 许多 代码 的 修改 ， 代 码 如 下 : 


var setUserInfo = function( id, name, address, sex, mobile, qq ){ 
console.log( 'id= ' + id ); 
console.log( 'name= ”+name ); 
console.log( 'address= ' + address ); 
console.log( 'sex= ' + sex ); 
console.log( 'mobile= ' + mobile ); 
console.log( 'qq= ' + qq ); 
}; 


setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********! ， 377876679 ); 
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这 时 我 们 可 以 把 参数 都 放 和 人 一 个 对 象 内 ， 然 后 把 该 对 象 传人 setUserInfo 函数 ，setUserInfo 
函数 需要 的 数据 可 以 自行 从 该 对 象 里 获取 。 现 在 不 用 再 关心 参数 的 数量 和 顺序 ， 只 要 保证 参数 对 
应 的 key 值 不 变 就 可 以 了 : 


var setUserInfo = function( obj ){ 
console.log( 'id= ' + obj.id ); 
console.log( 'name= ' + obj.name ); 
console.log( 'address= ' + obj.address ); 
console.log( 'sex= ' + obj.sex ); 
console.log( 'mobile= ' + obj.mobile ); 
console.log( 'qq= ' + obj.qq ); 


}; 


setUserInfo({ 
id: 1314， 
name: 'sven', 
address: 'shenzhen', 
sex: 'male', 
mobile: “ 开 3 了 六 求 米 六 洲 米 米 才 5 
qq: 377876679 

]); 


22.7 尽量 减少 参数 数量 


如 果 调 用 一 个 函数 时 需要 传人 多 个 参数 , 那 这 个 函数 是 让 人 望 而 生 贞 的 , 我 们 必须 搞 清 楚 这 
些 参数 代表 的 含义 ,必须 小 心 翼 辟 地 把 它们 按照 顺序 传人 该 函数 。 而 如 果 一 个 函数 不 需要 传人 任 
何 参数 就 可 以 使 用 ， 这 种 函数 是 深 受 人 们 喜爱 的 。 在 实际 开发 中 ,向 函数 传递 参数 不 可 避免 ,但 
我 们 应 该 尽量 减少 函数 接收 的 参数 数量 。 下 面 举 个 非常 简单 的 示例 。 有 一 个 画图 函数 draw， 它 
现在 只 能 绘制 正方 形 ， 接 收 了 3 个 参数 ， 分 别 是 图 形 的 width、heigth 以 及 square: 

var draw = function( width, height, square ){}; 

但 实际 上 正方 形 的 面积 是 可 以 通过 width 和 height 计算 出 来 的 , 于 是 我 们 可 以 把 参数 square 
从 draw 函数 中 去 掉 : 


var draw = function( width, height ){ 
var square = width * height; 


}; 

假设 以 后 这 个 draw 函数 开始 支持 绘制 圆 形 ,我 们 需要 把 参数 width 和 height 换 成 半径 radius， 
但 图 形 的 面积 square 始终 不 应 该 由 客户 传人 ， 而 是 应 该 在 draw 函数 内 部 ， 由 传人 的 参数 加 上 一 
定 的 规则 计算 得 来 。 此 时 ， 我 们 可 以 使 用 策略 模式 ， 让 draw 函数 成 为 一 个 支持 绘制 多 种 图 形 的 
函数 。 
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22.8 人 少 用 三 目 运算 符 

有 一 些 程序 员 喜 欢 大 规模 地 使 用 三 目 运 算 符 ,来 代替 传统 的 if、else。 理由 是 三 目 运 算 符 性 
能 高 ， 代 码 量 少 。 不 过 ， 这 两 个 理由 其 实 都 很 难 站 得 住 脚 。 

即使 我 们 假设 三 目 运算 符 的 效率 真 的 比 if、else 高 ， 这 点 差距 也 是 完全 可 以 忽略 不 计 的 。 
在 实际 的 开发 中 ， 即 使 把 一 段 代 码 循环 一 百 万 次 ， 使 用 三 目 运算 符 和 使 用 if、else 的 时 间 开 销 
处 在 同一 个 级 别 里 。 

同样 , 相 比 损失 的 代码 可 读 性 和 可 维护 性 , 三 目 运 算 符 节 省 的 代码 量 也 可 以 忽略 不 计 。 让 JS 
文件 加 载 更 快 的 办 法 有 很 多 种 ， 如 压缩 、 缓 存 、 使 用 CDN 和 分 域名 等 。 把 注意 力 只 放 在 使 用 三 
目 运算 符 节 省 的 字符 数量 上 ， 无 异 于 一 个 300 斤 重 的 人 把 超重 的 原因 归罪 于 头皮 履 。 


如 果 条 件 分 支 逻 辑 简单 旦 清晰 ， 这 无 碍 我 们 使 用 三 目 运算 符 : 
var global = typeof window !== "undefined" ? window : this; 


但 如 果 条 件 分 支 逻 辑 非常 复杂 ， 如 下 段 代码 所 示 ， 那 我 们 最 好 的 选择 还 是 按部就班 地 编写 
if、else。if、else 语句 的 好 处 很 多 ， 一 是 阅读 相对 容易 ， 二 是 修改 的 时 候 比 修改 三 目 运算 符 周 
围 的 代码 更 加 方便 : 


if ( laup || !bup ) { 
return a === doc ? -1 : 

b=== doc ?1: 
aup ? -1 : 
bup ?1: 
sortInput ? 
( indexOf.call( sortInput, a ) - indexOf.call( sortInput，b ) ) : 
0; 


} 


22.9 ”合理 使 用 链 式 调用 


经 常 使 用 jQuery 的 程序 员 相当 习惯 链 式 调用 方法 , 在 JavaScript 中 ,可 以 很 容易 地 实现 方法 
的 链 式 调用 ， 即 让 方法 调用 结束 后 返回 对 象 自身 ， 如 下 代码 所 示 : 
var User = function(){ 


this.id = null; 
this.name = null; 


}; 


User.prototype.setId = function( id ){ 
this.id = id; 
return this; 


}; 


User.prototype.setName = function( name ){ 
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this.name = name; 
return this; 


}; 


console.log( new User().setId( 1314 ).setName( 'sven' ) ); 


或 者 : 
var User = { 
id: null, 
name: null, 
setId: function( id ){ 
this.id = id; 
return this; 
}), 


setName: function( name ){ 
this.name = name; 
return this; 
} 
}; 


console.log( User.setId( 1314 ).setName( 'sven' ) ); 
使 用 链 式 调用 的 方式 并 不 会 造成 太 多 阅读 上 的 困难 , 也 确实 能 省 下 一 些 字 符 和 中 间 变 量 , 但 
节省 下 来 的 字符 数量 同样 是 微不足道 的 。 链 式 调用 带 来 的 坏处 就 是 在 调试 的 时 候 非 常 不 方便 , 如 
果 我 们 知道 一 条 链 中 有 错误 出 现 ， 必 须 得 先 把 这 条 链 拆 开 才 能 加 上 一 些 调试 log 或 者 增加 断 点 ， 
这 样 才能 定位 错误 出 现 的 地 方 。 

如 果 该 链条 的 结构 相对 稳定 ， 后 期 不 易 发 生 修改 , 那么 使 用 链 式 调用 无 可 厚 非 。 但 如 果 该 链 
条 很 容易 发 生变 化 ， 导 致 调试 和 维护 困难 ,那么 还 是 建议 使 用 普通 调用 的 形式 : 


var user = new User(); 


user.setId( 1314 ); 
user.setName( 'sven' ); 


22.10 分解 大 型 类 
在 我 编写 的 HTML5 版 “街头 霸王 ”的 第 一 版 代码 中 ,负责 创建 游戏 人 物 的 Spirit 类 非常 庞 
大 ,不 仅 要 负责 创建 人 物 精灵 ， 还 包括 了 人 物 的 攻击 、 防 御 等 动作 方法 ， 代 码 如 下 : 


var Spirit = function( name ){ 
this.name = name; 


上 


Spirit.prototype.attack = function( type ){ // 下 主 
if ( type === 'waveBoxing' ){ 
console.log( this.name + ': 使 用 波动 源 ' ); 
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}else if( type === 'whirlKick' ){ 
console.log( this.name + ': 使 用 旋风 腿 ' ); 
} 
}; 


var Spirit = new Spirit( 'RYU' ); 


spirit.attack( 'waveBoxing' ); // 输出 : RYU: 使 用 波动 源 
spirit.attack( 'whirlKick' ); // 输出 : RYU: 使 用 旋风 腿 


后 来 发 现 ，Spirit.prototype.attack 这 个 方法 实现 是 太 庞大 了 ， 实 际 上 它 完 全 有 必要 作为 一 
个 单独 的 类 存在 。 面 向 对 象 设计 鼓励 将 行为 分 布 在 合理 数量 的 更 小 对 象 之 中 : 


var Attack = function( spirit ){ 
this.spirit = spirit; 


}; 


Attack.prototype.start = function( type ){ 
return this.list[ type ].call( this ); 


BB 


Attack.prototype.list = { 
waveBoxing: function(){ 
console.log( this.spirit.name + ': 使 用 波动 沧 ' ); 
}), 
whirlKick: function(){ 
console.log( this.spirit.name + ': 使 用 旋风 腿 ' ); 
} 
}; 


现在 的 Spirit 类 变 得 精简 了 很 多 ， 不 再 包括 各 种 各 样 的 攻击 方法 ， 而 是 把 攻击 动作 委托 给 
Attack 类 的 对 象 来 执行 ， 这 段 代码 也 是 策略 模式 的 运用 之 一 : 
var Spirit = function( name ){ 


this.name = name; 
this.attack0bj = new Attack( this ); 


}3 


Spirit.prototype.attack = function( type ){ // 攻击 
this.attackObj.start( type ); 
}; 


var Spirit = new Spirit( 'RYU' ); 


spirit.attack( 'waveBoxing' ); // 输出 : RYU: 使 用 波动 源 
spirit.attack( 'whirlKick' ); // 输出 : RYU: 使 用 旋风 腿 


22.11 用 return 退出 多 重 循 环 


假设 在 函数 体内 有 一 个 两 重 循环 语句 , 我 们 需要 在 内 层 循环 中 判断 ， 当 达到 某 个 临界 条 件 时 
退出 外 层 的 循环 。 我 们 大 多 数 时 候 会 引入 一 个 控制 标记 变量 : 
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var func = function(){ 
var flag = false; 
for ( var i = 0; i < 10; i+t+ ){ 
for ( var j = 0; j < 10; j++ ){ 
if (i*]j >30 ){ 


flag = true; 
break; 
} 
} 
if ( flag === true ){ 
break; 


} 
}; 
第 二 种 做 法 是 设置 循环 标记 : 
var func = function(){ 
outerloop: 
for (var i = 0; i < 10; i+t+ ){ 
innerloop: 
for ( var j] = 0; j < 10; j++ ){ 
if (i*]j >30 ){ 
break outerloop; 
} 


} 
} 


这 两 种 做 法 无 疑 都 让 人 头 尝 目眩 ， 更 简单 的 做 法 是 在 需要 中 止 循环 的 时 候 直 接 退 出 整个 方法 : 


var func = function(){ 
for ( var i = 0; i < 10; i+t+ ){ 
for ( var j = 0; j < 10; j++ ){ 
if (i*]j >30 ){ 
return; 
} 


} 
} 
中 


当然 用 return 直接 退出 方法 会 带 来 一 个 问题 ,如果 在 循环 之 后 还 有 一 些 将 被 执行 的 代码 呢 ? 
如 果 我 们 提前 退出 了 整个 方法 ， 这 些 代 码 就 得 不 到 被 执行 的 机 会 : 
var func = function(){ 
for ( var i = 0; i < 10; i+t+ ){ 
for ( var j = 0; j < 10; j++ ){ 


if (i*]j >30 ){ 
return; 
} 


} 


} 
console.log( i ); ”// 这 名 代码 没有 机 会 被 执行 
}; 
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为 了 解决 这 个 问题 ， 我 们 可 以 把 循环 后 面 的 代码 放 到 return 后 面 ， 如 果 代 码 比较 多 ， 就 应 
该 把 它们 提炼 成 一 个 单独 的 函数 : 


该 


Cr 


var print = function( i ){ 
console.log( i ); 


3 


var func = function(){ 
for ( var i = 0; i < 10; i+t+ ){ 
for (var j = 0; j < 10; j++ ){ 
if (i*]j >30 ){ 
return print( i ); 
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欢迎 加 入 


图 灵 社 区 ITuring.cn 


最 前 沿 的 IT 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹豫 稍 律 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行 
动 拥抱 这 个 出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 
DRM-free 的 阅读 体验 : 在 线 阅读 和 PDF。 

相 比 纸 质 书 ， 电 子 书 具有 许多 明显 的 优势 。 它 不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 
片 《 即 使 有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 

图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 
网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 
以 较 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺 钴 。 同 
时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 
书 出 版 的 质量 。 


优惠 提示 : 现在 购买 电子 书 ， 读 者 将 获 赠 书 款 20% 的 社区 银子 ， 可 用 于 兑换 纸 质 样 书 。 


最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 版 和 开源 出 版 的 梦想 。 利 用 “合集 ” 功 
你 就 能 联合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 。( 收费 形式 须 经 过 
图 灵 社区 立项 评审 。 ) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 
这 个 梦想 。 成 熟 的 书稿 ， 有 机 会 和 人选 出 版 计划 ， 同 时 出 版 纸 质 书 。 

图 灵 社区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 欢 迎 
你 来 社区 申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 
翻译 工作 ， 是 需要 有 坚强 的 角力 的 。 


最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 
员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 
你 可 以 积极 参与 社区 经 常 开 展 的 访谈 、 乐 译 、 评 选 等 多 种 活动 ， 遍 取 积 分 和 银子 ， 积 累 个 人 声望 。 
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全 、 


关注 图 灵 教 育 关注 图 灵 社 区 
iTuring.cn 


在 线 出 版 电子 书 《 码 农 》 杂 志 图 灵 访 谈 …… 


全 


QQ 联系 我 们 


读者 QQ 群 ，218139230 164939616 


微 博 联系 我 们 


官方 账号 ，@ 图 灵 教 育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 ，@ 图 灵 束 野 

写作 本 版 书 ，@ 图 灵 小 花 @ 图 灵 张 起 

翻译 英文 书 ，@ 李 松 峰 @ 朱 痢 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 ，@ 图 灵 乐 声 

翻译 韩文 书 ，@ 图 灵 陈 曦 

电子 书 合作 : @hi_jeanne 

图 灵 访 谈 /《 码 农 》 杂 志 : @ 李 盼 ituring 

加 入 我 们 ，@ 王 子 是 好 人 


多 


微 信 联系 我 们 一 一 一 一 
Oh 
turingbooks ituring_interview 
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图 灵 社 区 读者 评价 
e@ 深入浅出， 讲解 得 很 好 ! 
一 一 starj3221 
e@ “看 了 样 章 ， 很 不 错 ! 有 点 迫不及待 地 想 看 全 书 了 ! ” 
一 一 天 才 少年 
@ “看 了 几 章 真 心 感觉 不 错 的 。 突 然 之 间 感 觉 ， 我 领会 了 一 点 JS OOP 
的 精 朵 了 。 
二 339025450 


业内 推荐 
e“ 这 本 书 由 浅 入 深 ， 讲 解 得 很 细致 ， 对 学 习 JavaScript 很 有 帮助 。” 
一 一 于 涛 ， 腾 讯 AloyTeam 负 责 人 
e@“ 内 容 浅显 易 懂 ， 履 盖 范 围 全 面 ， 对 部 分 常用 的 模式 有 深入 的 剖析 。- 
一 一 林 挺 ， 微 众 银行 前 端 工 程 师 


设计 模式 是 软件 设计 中 经 过 了 大 量 实际 项 目 验证 的 可 复 用 的 优秀 解决 方案 ， 它 有 助 于 程序 员 
写 出 可 复 用 和 可 维护 性 高 的 程序 。 许 多 优秀 的 JavaScript 开 源 框架 都 运用 了 不 少 设计 模式 ， 越 来 
越 多 的 程序 员 从 设计 模式 中 获 益 ， 也 许 是 改善 了 自己 编写 的 某 个 软件 ， 也 许 是 更 好 地 理解 了 面向 
对 象 的 编程 思想 。 无 论 如 何 ， 系 统 地 学 习 设计 模式 都 会 令 你 受益 菲 浅 。 

本 书 针 对 JavaScript 语 言 特性 全 面 总 结 了 16 个 常用 的 设计 模式 ， 讲 解 了 JavaScript 面 向 
向 法 对 象 和 函数 式 编程 方面 的 基础 知识 ， 介 绍 了 面向 对 象 的 设计 原则 及 其 在 设计 模式 中 的 体现 ， 还 分 
AlloyTeam Blog 享 了 面向 对 象 编程 技巧 和 日 常 开发 中 的 代码 重 构 。 本 书 将 教会 你 如 何 把 经 典 的 设计 模式 应 用 到 
JavaScript 语 言 中 ， 编 写 出 优美 高 效 、 结 构 化 和 可 维护 的 代码 。 


JavaScript 
设计 模式 与 开发 实 中 


ISBN 978-7-115-38888-9 
图 灵 社 区 : iTuring.cn 
热线 : (010) 51095186 转 600 由 

计算 机 /程序 设计 ISBN 978-7-115-38888-9 
人 民 邮 电 出 版 社 网 址 . www.ptpress.com.cn 定价 : 59.00 元 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 :turingbooks 
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